Čo je selektor CSS?
Degui Adil/Getty Images
CSS spolieha na pravidlá zhody vzorov, aby určil, ktorý štýl sa použije na ktorý prvok v dokumente. Tieto vzory sú tzv selektory a siahajú od názvov značiek (napr.
|_+_| na priradenie značiek odseku) k veľmi komplikovaným vzorom, ktoré zodpovedajú veľmi špecifickým častiam dokumentu. Napríklad |_+_| by sa zhodovalo s ľubovoľným |_+_| tag s triedou |_+_| ktorý je potomkom odseku s id |_+_|Selektor CSS je súčasťou volania štýlu CSS, ktorý určuje, ktorá časť webovej stránky by mala byť štylizovaná. Selektor obsahuje jednu alebo viac vlastností, ktoré definujú spôsob výberu HTMLSelektor CSS
Existuje niekoľko rôznych typov selektorov:
- selektory typu – zhoda s konkrétnym prvkom
- selektory tried – párovanie prvkov s konkrétnou triedou
- Selektory ID – priraďovanie prvku k určitému ID
- potomkov selektorov – zodpovedajúce prvky, ktoré sú potomkami konkrétneho prvku
- detské selektory – zodpovedajúce prvky, ktoré sú potomkami konkrétneho prvku
- univerzálne voliče – vhodné pre akýkoľvek prvok
- susedné súrodenecké selektory – zhodné prvky, ktorým bezprostredne predchádza konkrétny prvok
- selektory atribútov – párovanie prvkov s konkrétnym atribútom alebo hodnotou atribútu
- selektory pseudotried – párovanie prvkov s konkrétnou pseudotriedou
- selektory pseudoprvkov – párovanie prvkov so špecifickými vlastnosťami pseudoprvkov
Formátovanie štýlov CSS a selektorov CSS
Formát a CSS štýl vyzerá takto:
|_+_|Viaceré selektory, ktoré majú rovnaký štýl, oddeľte čiarkami. Toto sa nazýva zoskupenie voličov. Napríklad:
|_+_|
Selektory zoskupovania je skrátený mechanizmus na udržanie kompaktných štýlov CSS. Vyššie uvedené zoskupenie by malo rovnaký účinok ako:
|_+_|Vždy otestujte svoje selektory CSS
Nie všetky staršie prehliadače podporujú všetky selektory CSS. Ak nastavujete CSS na použitie s prehliadačmi starými ako IE8 alebo staršími, nezabudnite otestovať svoje selektory v toľkých prehliadačoch na toľkých operačných systémoch, koľko si myslíte, že by sa mohli použiť na prístup k vášmu kódu. Ak používate CSS1, CSS2 , alebo CSS3 selektory pre použitie s aktuálnymi prehliadačmi, mali by ste byť v poriadku.