CSS - selektory
Selektory v pravidlách kaskádových štýlov (stylesheets) popisujú prvky, triedy, identifikátory objektov a ich vzájomné kombinácie, na ktoré sa definovaný štýl má aplikovať.
Obsah
Základné selektory
Najjednoduchšími selektormi sú selektory typu a univerzálny selektor.
Selektor typu: X {...}
- X je ľubovoľná HTML značka. Tento selektor sa párujú s každou inštancií daného prvku na stránke. Príklad: pravidlo H1 (color: red) znamená, že uvedený štýl sa bude aplikovať na všetky prvky typu <h1> na stránke; všetky titulky úrovne 1 budú červené.
Univerzálny selektor: * {...}
- Značí sa symbolom * a páruje so všetkými prvkami. To znamená, že štýl uvedený s selektorom * sa bude aplikovať na všetky prvky, u ktorých je to možné.
- Príklad: pravidlo * (line-height: 140%) znamená, že všetky texty na stránke budú mať výšku riadky (Preklad) 140% základné výšky - nezáleží na tom, či budú vo vnútri značky <P>, <div>, vnútri tabuľky <TABLE> či budú mať definovanú nejakú triedu alebo identifikátor.
Poznámka: Štýl každého selektora môže byť následne predefinoval použitím kaskádovanie (pozri ďalej).
Selektory s atribútmi
U každého selektora je možné špecifikovať aj atribúty, ktoré sú uvedené pri danej HTML značke. Štýl sa potom aplikuje len na tie inštancie daného prvku, ktoré majú uvedené atribúty tak, ako je určené v selektore.
Selektor s kontrolou existencie atribútu: X [ATR] {...}
- Tento selektor páruje iba s tými prvkami X na stránke, ktoré majú uvedený atribút ATR, bez ohľadu na to, akú má hodnotu.
- Príklad: pravidlo H1 [title] {...} sa bude aplikovať iba na tie prvky <h1>, ktoré majú definovaný atribút title - na prvok <h1> Titulok </ h1> sa štýl aplikovať nebude, ale na prvok <H1 title="xxx"> Titulok </h1> áno.
Selektor s atribútom danej hodnoty: X [ATR = hodn] {...}
- Párujú len s prvkami, ktorých atribút ATR je presne rovný hodnote hodn.
- Príklad: pravidlo TABLE [width = "100"] {...} sa bude aplikovať iba na tie prvky typu <TABLE>, ktoré majú uvedený atribút práve width="100" - na iné prvky sa štýl aplikovať nebude. Atribút musí byť rovný hodnote presne, takže ani tabuľky s atribútom width = "100%" sa s týmto selektorom nespárujete.
Selektor s atribútom obsahujúcim hodnotu: X [ATR ~ = hodn] {...}
- Párujú len s prvkami, hodnotou ktorých atribútu ATR je medzerami oddelený zoznam "slov" a jedno z nich je presne rovné hodn.
- Príklad: pravidlu A [rel ~ = copyleft] {...} vyhovie taký prvok <A>, ktoré má v atribútu rel uvádza medzi inými hodnotu copyleft - napríklad <A rel="copyright copyleft copyeditor" ...>.
Selektor pre jazykové varianty: X [ATR | = hodn] {...}
- Párujú len s prvkami, hodnotou ktorých atribútu ATR je spojovníky - oddelený zoznam "slov" začínajúce na hodn. Znie to zložito, ale táto funkcia bola vytvorená špeciálne na určovanie jazykových variantov v atribúte lang (podľa RFC 1766), ktoré sú uvádzané práve v tejto podobe. Kým * [lang = en] párujú len s prvkami, ktoré majú uvedený atribút lang = "en", pravidlu * [lang | = en] vyhovie všetky prvky s každou variantou anglického jazyka - napr lang = "en", lang = " en-US " alebo lang = "en-cockney".
Poznámka: Atribúty u selektorov je možné kombinovať - príklad: pravidlo TABLE [width = 100] [title] {...} uspeje len u tých prvkov typu tabuľka, ktoré majú uvedené width = "100" a majú definovaný atribút title.
Selektory tried a ID
Selektor triedy: X.meno_triedy {...}
- Pravidlu vyhovie tie inštancie prvkov, ktorých trieda (class) je práve meno_triedy. Tento typ selektora bol zavedený iba pre zjednodušenie, pretože presne zodpovedá zápisu X [class = meno_triedy] {...}. V prípade selektora *. trieda nie je nutné univerzálny selektor * uvádzať, ako selektor postačí .trieda.
- Príklad: pravidlo H1.nadpis {...} párujú so všetkými prvkami <h1>, ktoré majú uvedený atribút class = "podnadpis"; pravidlu .nadpis {...} - čo je to isté ako *.nadpis {...} - potom vyhovie všetky prvky na stránke, ktoré majú class = "podnadpis".
Selektor ID: X # ident {...}
- Štýl sa použije len pri prvku, ktorého ID je ident. Opäť, pokiaľ nie je špecifikovaná konkrétna HTML značka, nie je potrebné uvádzať * # ident, ale postačí # ident.
- Príklad: pravidlu H1 # nazov {...} vyhovie len ten titulok <h1>, ktorého ID = "nazov". Pravidlu # nazov {...} potom vyhovie všetky prvky na stránke, ktoré majú definované ID = "nazov".
Poznámka: Selektor ID majú vyššiu prioritu ako selektory s atribútom - napr #nazov je z hľadiska kaskádovanie špecifickejšie ako [ID = nazov].
Kombinovanie selektorov
Selektory je možné vytvárať vzájomným kombinovaním jednoduchších selektorov a vytvárať tak špecifickejšie popis v závislosti na vzájomných vzťahoch prvkov a na štruktúre dokumentu. Selektory sa vzájomne kombinujú pomocou spojok '+', ' ', ',' a '>', z ktorých každá má iný význam.
Zoskupovanie selektorov: X, Y {...}
- Selektory, ktoré majú rovnaké vlastnosti, možno definovať jednoduchým spôsobom spoločne. Namiesto jednoduchého selektora možno uviesť zoznam niekoľkých selektorov oddelených čiarkou; definovaný štýl sa potom aplikuje jednotlivo na všetky selektory uvedené v zozname.
- Príklad: ak chceme nastaviť na titulky všetkých úrovní rovnakú (napr. červenú) farbu, môžeme ich definovať jednotlivo H1 (color: red) H2 (color: red) atď Pre zjednodušenie je ale tiež môžeme zoskupiť do jediného selektora s jednou spoločnou definíciu: H1, H2, H3, H4 (color: red). Oba zápisy sú ekvivalentné, ako je ale vidieť, zoskupenie selektorov je jednoduchšie a prehľadnejšie.
Selektor následníka: X Y {...}
- CSS umožňuje návrhárom, aby odlíšili HTML prvky podľa toho, na akom mieste, v akom kontexte dokumente sa vyskytujú. Oddelíme Ak v definícii dva selektory X a Y medzerou (resp. whitespace), znamená to, že pravidlo X Y {...} sa bude aplikovať na všetky prvky typu Y, ktoré sú následníkmi prvku X (prvok X je predchodcom prvku Y). Jednoducho povedané, pravidlo sa párujú s tými prvkami Y, ktoré sú obsiahnuté kdekoľvek vnútri nejakého prvku X.
- Príklad: ak chceme odlíšiť spôsob zvýraznenie <strong> v titulku <h1> od zvýraznenie v ostatnom texte, môžeme použiť kontextový selektor - napr H1 STRONG (color: red). Všetky prvky <strong>, ktoré sú vo vnútri nejakého prvku <h1> budú zobrazené červeno - napr tento: <h1> Toto je <strong> dôležitý </ STRONG> titulok </ H1>.
Selektor potomka: X> Y {...}
- Podobné ako v predchádzajúcom prípade - pravidlo sa ale aplikuje len vtedy, ak je Y potomkom (child) X, čiže X je rodič (parent) Y. Rozdiel medzi potomkom a nasledovníkom je v tom, že Y je potomok X (a teda X je rodič Y) práve vtedy, keď Y je obsiahnuté priamo vo vnútri prvku X. Kým Y je následník X aj vtedy, ak je Y ešte obsiahnuté v nejakom prvku Z, ktorý je potomkom X (každý potomok je aj následníkom, obrátene už to nemusí platiť). Napr. v štruktúre
<h1> Toto je <A href="xxx"> <B> dôležitý </B> odkaz </A> v titulku </H1>
- je A potomok H1 a B je potomok A. B už nie je potomok H1, ale je stále jeho následník. Príklad: pravidlo BODY > P {...} sa bude aplikovať na tie odseky <P>, ktoré sú (priamym) potomkom prvku <BODY>; na prvky <P>, ktoré sú ešte obsiahnuté v ďalšom prvku sa už vzťahovať nebude. Napr. v konštrukcii
<BODY>
<P> ...</P>
<div> <P> ...</P> </DIV>
</BODY>
- sa toto pravidlo bude aplikovať iba na prvý odsek; druhý odsek už nie je potomkom <BODY> (je zatvorený v <div>), je iba jeho následníkom (pravidlo BODY P {...} by sa ale už vzťahovalo aj na neho).
Selektor susedného súrodenca: X + Y {...}
- Pravidlo sa aplikuje na prvky Y, ak X a Y majú rovnakého rodičia (sú súrodenci) a Y nasleduje priamo po X. Tento selektor umožňuje špecifikovať štýl pre susediace prvky na rovnakej úrovni vo stromu dokumentu. Príklad: pravidlo H1 + H2 (margin:-10px) sa bude aplikovať na titulky <h2>, ktoré nasledujú priamo za titulkom <h1>. Tento selektor poskytuje možnosť presnejšie špecifikovať vzťahy medzi susediacimi prvkami, ktoré sú inak upravované automaticky počas formátovania a vykresľovanie dokumentu (napr. margin).
Pseudo-triedy a pseudo-prvky
Na rozdiel od všetkých ostatných selektorov, ktoré vychádzajú z informácií uvedených v zdrojovom dokumente, prinášajú pseudo-triedy a pseudo-prvky možnosť formátovať informácie nad rámec zdrojového dokumentu. Pseudo-triedy pre formátovanie sprístupňujú informácie, ktoré nemožno zistiť zo štruktúry dokumentu (s jednou výnimkou), dynamické zmeny a výsledky interakcie dokumente s používateľom. Pseudo-prvky (pseudo-elementy) umožňujú špecifikovať niektoré prvky jemnejšie, než sú uvedené v štruktúre dokumentu (napr. prvý znak či prvý riadok prvku); a dovoľujú dokonca pridávať text, ktorý vo zdrojovom dokumente vôbec nie je.
Pseudo-trieda: X: first-child
- Toto je ona jediná výnimka - selektor : first-child vychádza zo štruktúry dokumentu. Páruje sa s prvým potomkom daného prvku.
- Príklad: zatiaľ čo pravidlo DIV> P {...} sa bude aplikovať na všetky <P>, ktoré sú potomkami nejakého prvku <div>, pravidlo DIV> P: first-child (... ) potom iba na tie <P>, ktoré sú prvým potomkom nejakého <div>.
Pseudo-triedy odkazov: A: link a A: visited
- Prehliadače zvyčajne odlišujú odkazy, ktoré už používateľ navštívil a ktoré ešte nie. Tieto pseudo-triedy umožňujú ich implicitné formátovania. A:link vyhovujú tie odkazy <A>, ktoré užívateľ doteraz nenavštívil, A:visited potom tie, ktoré už navštívil. S týmito psedo-triedami je možné použiť aj špecifickejšie selektory (s atribúty, triedy atď) - napr definujeme pravidlá A[href="http://www.mojserver.org"]: visited (color: red) a A.mojlink: visited (color: red); obom vyhovie napr prvok <A href="http://www.mojserver.org" class="mojlink"> Môj server </ A>. Definovaný štýl sa bude aplikovať vtedy, ak používateľ už s prehliadačom navštívil adresu "http://www.mojserver.org" a odkaz bude zobrazený červeno. Element A nie je potrebné uvádzať. :link (color: blue) spôsobí, že všetky doteraz nenavštívené odkazy budú zobrazené modro.
Dynamické pseudo-triedy: X: hover, X: active a X: focus
- Interaktívne prehliadače môžu odlišovať zobrazenie prvkov podľa akcií používateľa. Klientov, ktorí nepodporujú interaktívne media, tieto pseudo-triedy nemusia podporovať.
- Pseudo-trieda :hover sa aplikuje vtedy, ukáže ak používateľ na daný prvok, ale neaktivuje ho (napr. nad neho nabehne kurzorom myši);
- :active potom vtedy, ak je prvok aktivovaný (napr. v čase medzi stlačením a pustením tlačidla myši);
- :focus vtedy, ak je prvok zvýraznený (napr. formulárové prvky pri zadávaní textu, prvky akceptujúci udalosti klávesnice atď).
- Tieto pseudo-triedy sa navzájom nevylučujú - prvky môžu súčasne vyhovovať aj viac z nich. Príklad: pravidlo A: focus: hover {...} bude splnené vtedy, ak bude mať prvok focus a súčasne na neho používateľ "ukáže".
- Je potrebné pamätať na poradie pravidiel s ohľadom na kaskádovanie. Napr. ak máme definíciu
A:link (color: blue)
A: visited (color: black)
A: hover (color: red)
A: active (color: orange)
- musí byť A:hover uvedené až za A:link a A:visited, pretože pravidlá kaskádovanie by inak prekryla vlastnosť color v A:hover. Podobne, pretože A:active nasleduje až za A:hover, color:orange sa aplikuje len vtedy, ak je prvok súčasne aktivovaný a je na neho "ukázané" (hover).
Jazyková pseudo-trieda: X: lang ()
- Tieto selektory možno použiť, ak dokument špecifikuje jazyk, ktorý prvky na stránke používajú. V prípade HTML4 to môže byť kombináciou informácií z hlavičky protokolu (HTTP), z informácií uvedených v <META> značkách v hlavičke dokumentu az atribútov lang ="...". Pseudo-trieda :lang(C) vyhovujú prvky v jazyku C, kde C je kód jazyka podľa špecifikácie HTML4 a RFC 1766.
- Príklad: pravidlá HTML:lang[sk](quotes: '"' '"') HTML:lang[en ](quotes: '"' '"') HTML:lang [fr](quotes: '«' '»') špecifikujú, ako sa zobrazí úvodzovky v citáciách podľa toho, v akom jazyku daný prvok bude - "citácie" v prípade slovenčiny "citácie" v prípade angličtiny a «citácie» v prípade francúzštiny.
Pseudo-prvky: X: first-line a X: first-letter
- Pseudo-prvok :first-line aplikuje daný štýl na prvý riadok textu daného bloku, podľa toho, ako prehliadač text sformátuje. Ak sa text zalomí inak (pri zmene veľkosti okna, pri zmene veľkosti textu atď) a zmení sa teda aj miesto zalomenie prvého riadku, bude text novo formátuje a :first-line sa bude znovu aplikovať na novo vzniknutý prvý riadok bloku. Podobne pseudo-prvok :first-letter sa aplikuje na prvý znak textu. Tomuto pseudo-prvku je možné aj definovať aj vlastnosť float, čím je možné vytvárať napr zapustené iniciály. Browseri by v prípade, že text začína interpunkciou, mali zahrnúť do :first-letter aj toto interpunční znamienko a vykresliť tak odlišne dva znaky - napr u texte <P> "Text" </ P> sa ako P:first-letter vykreslí "T, teda písmeno T aj s úvodzovkou, ktorá mu predchádza.
- Príklad: pravidlo P:first-line (text-transform: uppercase) zobrazí prvý riadok každého odseku verzálky; pravidlo
P.perex: first-letter (
float: left; font-size: 300%;
font-weight: bold
)
- spôsobí, že sa prvý znak odseku, ktorý má class = "perex", sa vykreslí ako zapustená iniciála (obtekaný box), trojnásobnej veľkosti a tučne.
Poznámka: u týchto pseudo-prvkov je možné použiť len niektoré zo všetkých dostupných vlastností CSS. Ich presný zoznam je uvedený v špecifikácii CSS.
Pseudo-prvky: X: before a X: after
- Tieto pseudo-prvky sa používajú na vloženie generovaného obsahu pred a za daný prvok.
- Príklad: pravidlo P.poznamka: before (content: "Pozn:") spôsobí, že na začiatok každého odseku triedy Poznamka sa vloží text "Pozn:", podobne P.poznamka:after (content: "koniec poznámky") vloží text na koniec odseku.
H1: before (content: counter (chapno, upper-roman) ".")
- definuje spôsob ako číslovať nadpisy <h1>.
Príklady
Všetky typy selektorov možno vzájomne kombinovať a vytvárať tak štruktúry čo najpresnejšie pokrývajúce potreby návrhára. Príklady:
Zoskupenie selektorov umožní nastaviť rovnaké vlastnosti viacerých prvkom súčasne:
H1, H2, P:first-line { color:blue }
Kontextové selektory umožní nastaviť rôzne správanie rovnakého typu prvku podľa toho, v akom prvku sú obsiahnuté:
BODY > P { text-align: left }
DIV > P { text-align: justify }
DIV.zahlavie + DIV.menu { background: red }
Použitie identifikátorov, tried a atribútov umožňuje presne obmedziť, na ktoré prvky sa daný štýl bude aplikovať
DIV#zahlavie { ... }
DIV.stlpec[title="clanky"]
A[target="_blank"]
Vhodne zvolenými triedami u odkazov možno skvalitniť navigáciu na stránke - niekedy je vhodné odlíšiť spôsob zobrazenia a správania rôznych typov odkazov
A { color: red; text-decoration: none }
A:hover { text-decoration: underline }
A.menu { background: red; color: white; text-decoration: none }
A.menu:hover { background: black }
