V pravidlech tabulek kaskádových stylů (stylesheets) popisují prvky, třídy, identifikátory objektů a jejich vzájemné kombinace, na něž se definovaný styl má aplikovat.

Základní selektory

Nejjednoduššími selektory jsou selektory typu a univerzální selektor.

Selektor typu: X {…}

X je libovolná HTML značka. Tento selektor se páruje s každou instancí daného prvku na stránce.

Univerzální selektor: * {…}

Značí se symbolem * a páruje se všemi prvky. To znamená, že styl uvedený se selektorem * se bude aplikovat na všechny prvky, u nichž je to možné.

Selektory s atributy

U každého selektoru je možné specifikovat i atributy, jež jsou uvedeny u dané HTML značky. Styl se pak aplikuje pouze na ty instance daného prvku, které mají uvedeny atributy tak, jak je určeno v selektoru.

Selektor s kontrolou existence atributu: X[atr] {…}

Tento selektor páruje pouze s těmi prvky X na stránce, které mají uveden atribut atr, bez ohledu na to, jakou má hodnotu.

Selektor s atributem dané hodnoty: X[atr=hodn] {…}

Páruje pouze s prvky, jejichž atribut atr je přesně roven hodnotě hodn.

Selektor s atributem obsahujícím hodnotu: X[atr~=hodn] {…}

Páruje pouze s prvky, hodnotou jejichž atributu atr je mezerami oddělený seznam „slov“ a jedno z nich je přesně rovno hodn.

Selektory tříd a ID

Selektor třídy: X.jméno_třídy {…}

Pravidlu vyhoví ty instance prvků, jejichž třída (class) je právě jméno_třídy. Tento typ selektoru byl zaveden pouze pro zjednodušení, neboť přesně odpovídá zápisu X[class=jméno_třídy] {…}. V případě selektoru *.třída není nutné univerzální selektor * uvádět, jako selektor postačí .třída.

Selektor ID: X#ident {…}

Styl se použije pouze u prvku, jehož ID je ident. Opět, pokud není specifikována konkrétní HTML značka, není nutné uvádět *#ident, ale postačí #ident.

Kombinování selektorů

Selektory je možné vytvářet vzájemným kombinováním jednodušších selektorů a vytvářet tak specifičtější popis v závislosti na vzájemných vztazích prvků a na struktuře dokumentu. Selektory se vzájemně kombinují pomocí spojek , +>, z nichž každá má jiný význam.

Seskupování selektorů: X, Y {…}

Selektory, které mají stejné vlastnosti, lze definovat jednoduchým způsobem společně. Namísto jednoduchého selektoru lze uvést seznam několika selektorů oddělených čárkou; definovaný styl se poté aplikuje jednotlivě na všechny selektory uvedené v seznamu.

Oba zápisy jsou ekvivalentní, jak je ale vidět, seskupení selektorů je snazší a přehlednější.

Selektor následníka: X Y {…}

CSS umožňuje návrhářům, aby odlišili HTML prvky podle toho, na jakém místě, v jakém kontextu dokumentu se vyskytují. Oddělíme-li v definici dva selektory X a Y mezerou (resp. whitespace), znamená to, že pravidlo X Y {…} se bude aplikovat na všechny prvky typu Y, které jsou následníky prvku X (prvek X je předchůdcem prvku Y).

Jednoduše řečeno, pravidlo se páruje s těmi prvky Y, které jsou obsaženy kdekoli uvnitř nějakého prvku X.

Selektor potomka: X > Y {…}

Obdobné jako v předchozím případě – pravidlo se ale aplikuje pouze tehdy, je-li Y potomkem (child) X, neboli X je rodič (parent) Y. Rozdíl mezi potomkem a následníkem je v tom, že Y je potomek X (a tedy X je rodič Y), právě když Y je obsaženo přímo uvnitř prvku X. Zatímco Y je následník X i tehdy, je-li Y ještě obsaženo v nějakém prvku Z, který je potomkem X (každý potomek je i následníkem, obráceně již to nemusí platit).

Selektor sousedního sourozence: X + Y {…}

Pravidlo se aplikuje na prvky Y, pokud X a Y mají stejného rodiče (jsou sourozenci) a Y následuje přímo po X. Tento selektor umožňuje specifikovat styl pro sousedící prvky na stejné úrovni ve stromu dokumentu.

Pseudo-třídy a pseudo-prvky

Na rozdíl od všech ostatních selektorů, které vycházejí z informací uvedených ve zdrojovém dokumentu, přinášejí pseudo-třídy a pseudo-prvky možnost formátovat informace nad rámec zdrojového dokumentu. Pseudo-třídy pro formátování zpřístupňují informace, které nelze zjistit ze struktury dokumentu (s jednou výjimkou), dynamické změny a výsledky interakce dokumentu s uživatelem.

Pseudo-prvky (pseudo-elementy) umožňují specifikovat některé prvky jemněji, než jsou uvedeny ve struktuře dokumentu (např. první znak či první řádek prvku); a dovolují dokonce přidávat text, který ve zdrojovém dokumentu vůbec není.

Pseudo-třída: X:first-child

Toto je ona jediná výjimka – selektor :first-child vychází ze struktury dokumentu. Páruje se s prvním potomkem daného prvku.

Pseudo-třídy odkazů: A:link a A:visited

Prohlížeče obvykle odlišují odkazy, které již uživatel navštívil a které dosud nikoli. Tyto pseudo-třídy umožňují jejich implicitní formátování. A:link vyhovují ty odkazy <A>, které uživatel dosud nenavštívil, A:visited pak ty, které již navštívil. S těmito psedo-třídami je možné použít i specifičtější selektory (s atributy, třídy atd.) – např. definujeme pravidla A[href=“http://www.mujserver.cz“]:visited {color:red} a A.mujllink:visited {color:red}; oběma vyhoví např. prvek <A href=“http://www.mujserver.cz“ class=“mujlink“>Můj server</A>.

Definovaný styl se bude aplikovat tehdy, pokud uživatel již s prohlížečem navštívil adresu „http://www.mujserver.cz“ a odkaz bude zobrazen červeně. A není nutné uvádět, :link {color:blue} způsobí, že všechny dosud nenavštívené odkazy budou zobrazeny modře.

Dynamické pseudo-třídy: X:hover, X:active a X:focus

Interaktivní prohlížeče mohou odlišovat zobrazení prvků podle akcí uživatele. Klienty, které nepodporují interaktivní media, tyto pseudo-třídy nemusí podporovat. Pseudo-třída :hover se aplikuje tehdy, ukáže-li uživatel na daný prvek, ale neaktivujej jej (např. nad něj najede kurzorem myši); :active pak tehdy, je-li prvek aktivován (např. v čase mezi stiskem a puštěním tlačítka myši); a :focus tehdy, je-li prvek zvýrazněn (např. formulářové prvky při zadávání textu, prvky akceptující události klávesnice atd.).

Tyto pseudo-třídy se vzájemně nevylučují – prvky mohou současně vyhovovat i více z nich.

Je potřeba pamatovat na pořadí pravidel s ohledem na kaskádování. Např. máme-li definici A:link {color:blue} A:visited {color:black} A:hover {color:red} A:active {color:orange}, musí být A:hover uvedeno až za A:link a A:visited, protože pravidla kaskádování by jinak překryla vlastnost color v A:hover.

Obdobně, protože A:active následuje až za A:hover, color:orange se aplikuje jen tehdy, je-li prvek současně aktivován a je na něj „ukázáno“ (hover).

Jazyková pseudo-třída: X:lang()

Tyto selektory lze použít, pokud dokument specifikuje jazyk, který prvky na stránce používají. V případě HTML4 to může být kombinací informací z hlavičky protokolu (HTTP), z informací uvedených v <META> značkách v záhlaví dokumentu a z atributů lang=“…“. Pseudo-třídě :lang(C) vyhovují prvky v jazyce C, kde C je kód jazyka podle specifikace HTML4 a RFC 1766.

Pseudo-prvky: X:first-line a X:first-letter

Pseudo-prvek :first-line aplikuje daný styl na první řádek textu daného bloku, podle toho, jak prohlížeč text zformátuje. Pokud se text zalomí jinak (při změně velikosti okna, při změně velikosti textu atd.) a změní se tedy i místo zalomení prvního řádku, bude text nově zformátován a :first-line se bude znovu aplikovat na nově vzniklý první řádek bloku.

Obdobně pseudo-prvek :first-letter se aplikuje na první znak textu. Tomuto pseudo-prvku je možné i definovat i vlastnost float, čímž je možné vytvářet např. zapuštěné iniciály. Klienty by v případě, že text začíná interpunkcí, měly zahrnout do :first-letter i toto interpunční znaménko a vykreslit tak odlišně dva znaky – např. u textu <P>“Text“</P> se jako P:first-letter vykreslí „T, tedy písmeno T i s úvozovkou, která mu předchází.

Pseudo-prvky: X:before a X:after

Tyto pseudo-prvky se používají ke vložení generovaného obsahu před a za daný prvek. Generovanému obsahu se budeme věnovat v samostané kapitole později.