V tomto poslednom tutoriáli o selektoroch vám predstavím veľmi špeciálnu formu selektorov. Ide o tzv. pseudotriedy a pseudoelementy. Tieto selektory sa nevzťahujú na konkrétne prvky HTML, ale sú generované výstupovým zariadením.
S pseudotriedami a pseudoelementami môžete definovať deklarácie pre časti HTML, ktoré nie sú jednoznačne opísané konkrétnym prvkom HTML. Typické príklady sú práve kliknutý hyperlink alebo ešte nenavštívený odkaz.
Úprava hypertextových odkazov
Veľmi často sa chceme prispôsobiť vzhľad hypertextových odkazov na stránke. Na to poskytuje CSS mnoho možností, pomocou ktorých je možné ovplyvniť rôzne stavy hypertextových odkazov a nakoniec ich vizuálne prispôsobiť.
Ak chcete napríklad priradiť hypertextovému odkazu červenú farbu, bude to vyzerať nasledovne:
a:link {
color: red;
}
S a:visited sa označujú už navštívené hypertextové odkazy. Nasledujúca syntax umožňuje zobraziť tieto hypertextové odkazy, ktoré boli už raz kliknuté, modrou farbou.
a:visited {
color:blue;
text-decoration:none;
}V prehliadači to vyzerá takto:
Ak chcete upraviť hypertextové odkazy, ktoré sa práve klikli, je to tiež možné.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Pre túto úpravu sa používa syntax a:active.
Syntax a:hover sa naopak vzťahuje na stav, keď sa myšou prejde nad hypertextovým odkazom. Okrem toho existuje aj pseudoelement a:focus. Tento popisuje okamih, keď hypertextový odkaz získa zaostrenie.
Ďalšie pseudoelementy
Existujú pseudoelementy, ktoré umožňujú vybrať časti iných prvkov. Typickým príkladom je ::first-letter. Tento pseudoelement vyberá prvý znak aktuálneho prvku. Môže byť použitý na všetky prvky obsahujúce text. Pozor však: pseudoelementy musia byť zapísané až na konci všetkých selektorov. Musia stáť pred otvorenou zloženou zátvorkou.
h1::first-letter {
color: blue;
}
Pomocou ::first-line môže byť vybraný prvý riadok prvku. Tento pseudoelement je použiteľný výlučne na prvky na úrovni bloku. Príklad:
p::first-line {
background-blue;
}
A tu je výsledok v prehliadači:
ein
Pomocou pseudoelementov :after a :before môžete pred a po prvku zobraziť ďalšie obsahy. S príkazom content môžete určiť, čo sa má vypísať.
• normal – bežný pseudoelement nebude vygenerovaný.
• none – pseudoelement nebude vygenerovaný.
• <string> – do značiek jednoduchej alebo dvojitej úvodzovky sa vypíše špecifikovaný reťazec znakov.
• <uri> – vloží sa zdroj definovaný URI.
• <counter> – definuje počítadlo alebo adresuje konkrétne počítadlo.
• attr(<identifier>) – hodnota atribútu uvedeného v zátvorkách sa vloží.
• close-quote – pridá koncové úvodzovky.
• no-close-quote – koncové úvodzovky nepridá, ale zvýši hĺbku zanorenia o jedna.
• no-open-quote – počiatočné úvodzovky nepridá, ale zvýši hĺbku zanorenia o jedna.
• open-quote – pridá počiatočné úvodzovky.
Príklad:
ul li:before {
content: uri("bullet.gif");
}
S CSS3 bol zavedený pseudoselektor :not. Pomocou neho sa dajú veľmi jednoducho zvoliť konkrétne obsahy. Prvý príklad ukáže, aký výkonný môže byť tento pseudoselektor. Predpokladajme, že chcete vybrať všetky hypertextové odkazy, ktoré nemajú atribút href. Príslušná syntax by vyzerala nasledovne:
a:not([href])
"Bežné" hypertextové odkazy nebudú ovplyvnené touto syntaxou. S ňou by sa však dalo úspešne pristúpiť k definíciám kotiev.
<a name="top">Seitenanfang</a>
Trochu podrobnejší príklad by mal ukázať silu :not. V rámci dokumentu boli definované rôzne odseky textu.
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Okrem textových odsekov označených tagom p existujú aj oblasť div a odkaz. Teraz sa má stať nasledovné:
• Všetky odseky označené p sa budú zobrazovať s čiernou farbou písma.
• Na miestach, kde nie sú odseky p, sa naopak bude používať červená farba písma.
Príslušná syntax css vyzerá nasledovne:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Princíp dedičnosti
Jednou z najdôležitejších vecí, pokiaľ ide o porozumenie definíciám CSS, je dedičnosť. V skutočnosti sa štýlové vlastnosti v CSS dedia z jedného na druhý prvok.
Príklad:
html {
color: red
}Podľa tejto definície sa prvku html priradí predná farba červená.
V dôsledku tohto princípu dedenia sa táto farba v červenej farbe zobrazuje všetkým prvkom, ktoré sú podriadené pod html. Teraz teda budú všetky prvky, ktoré sú pod html, zobrazené doma v červenej farbe. Výhoda tohto riešenia: Pre tieto prvky nemusíte explicitne určiť farbu červenej. Čo ak však obsah označený tagom p nemá byť zobrazený vo farbe červenej? Potom musíte prekryť nadradenú farbu definovanú v html.
html {
color: red;
}
p {
color: #000;
}
Čo sa stane, ak existujú dva prvky p a div?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Výsledok vyzerá nasledovne:
Definícia farby html ovplyvňuje výlučne obsah prvku div. Naopak odsek p sa zobrazuje čiernym písmom.
V CSS existujú rôzne spôsoby, ako definovať štýlové vlastnosti. Preto môže existovať protichodná pokyny pre prvok. Pre tieto prípady CSS uvádza váhovací princíp. Na základe tohto princípu je stanovené, ktoré pokyny pre prvok majú prednosť. V tejto chvíli nechcem ísť do detailov tohto princípu. Podrobnejšie informácie o tom nájdete napríklad na stránke http://wiki.selfhtml.org/wiki/CSS/Kaskade alebo aj na stránke http://www.thestyleworks.de/basics/cascade.shtml.
Čo ma zaujíma, je ukázať, na čo si treba dať pozor pri definovaní vlastností CSS. Na tento účel slúži nasledujúci príklad:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>V prehliadači to bude vyzerať takto:
Ako vidíte, slová označené tagom strong sú formátované rôznymi spôsobmi. Ktorý typ formátovania sa používa, závisí na poradí definícií.
Ako alternatívu existuje kľúčové slovo !important, ktoré umožňuje označiť CSS pokyn ako veľmi dôležitý.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Opäť sa pozrime na výsledok:
Určite si prečítajte uvedené zdroje v tejto príručke. (Hoci na začiatok nemusíte preniknúť do takej hĺbky tejto témy).
