Pseudotřídy

Pomocí pseudotříd můžete prvky na stránce klasifikovat podle určitých vlastností. Pseudotřídy nevyjadřují charakter prvku, ale spíše jeho aktuální stav. V porovnání s běžnými třídami mají tyto důležité odlišnosti:

• Jejich názvy jsou pevně dány, jsou součástí definice CSS.
• Nezapisují se do HTML kódu stránky.
• Ve stylovém předpisu se od jména prvku oddělují dvojtečkou.

Pseudotříd existuje hromada, podívejme se na ty nejčastěji používané.

Kořen

Začněme shora, protože v CSS se poslední dobou často setkáte s pravidly typu

:root {
    ...
}

Pseudotřída root představuje kořen dokumentového stromu a zmíněná pravidla nastavují výchozí hodnoty pro formátování stránky. Běžně se v nich definuje výchozí písmo, barvy, hodnoty různých proměnných a podobně.

V podstatě bychom ji nepotřebovali, protože znamená prakticky totéž co selektor prvku html, ale zažila se konvence dávat jí přednost.

Pro odkazy

Speciálně pro odkazy je definována dvojice pseudotříd, jejichž prostřednictvím můžete odlišit odkazy již navštívené od těch, které uživatel ještě neviděl. Dotyčné pseudotřídy se jmenují visited (navštívené odkazy) a link (dosud nenavštívené).

Následující dvojice pravidel nastaví nenavštíveným odkazům modrou barvu a navštíveným fialovou, což je klasické schéma:

a:link    { color: blue; }
a:visited { color: purple; }

Dynamické

Dynamické pseudotřídy umožňují reagovat na uživatelovu činnost. Díky nim stránka může „ožít“ a měnit svůj vzhled podle toho, jak uživatel pohybuje myší či pracuje s klávesnicí. K dispozici máte následující dynamické pseudotřídy:

hover

Uživatel přesunul myš nad dotyčný prvek, ale zatím jej neaktivoval.

active

Uživatel aktivoval dotyčný prvek – klepl na něj myší, stiskl Enter a podobně.

focus

Uživatel na prvek přenesl zaměření. Zaměření se typicky přenáší klávesou Tab a v praxi znamená, že dotyčný prvek má přidělenu klávesnici a lze jej aktivovat klávesou Enter.

focus-visible

Je podmnožinou předchozí. Prvek je zaměřen a prohlížeč je toho názoru, že by měl jeho zaměření nějak viditelně signalizovat. Doporučuje se používat raději focus-visible než focus.

focus-within

Je zaměřen buď prvek sám, nebo některý z jeho potomků.

target

Jedná se o prvek, na který vedl odkaz na část stránky. Jestliže byla stránka otevřena odkazem, který končí #identifikátor, pak je prvku s id="identifikátor" přidělena pseudotřída target.

Dynamické pseudotřídy se často používají v kombinaci s odkazovými, aby zajistily patřičné interaktivní chování odkazů. Celkem běžné dnes je, že odkaz změní svůj vzhled, když na něj najedete kurzorem. Podívejte se na příklad dynamických odkazů.

Dynamické pseudotřídy nejsou omezeny jen na odkazy. Můžete je definovat libovolným prvkům. Podívejte se třeba jak se zvýrazní odkazy, když najedete kurzorem na odstavec. focus vám zase umožňuje zvýraznit vyplňovanou položku formuláře.

Při používání dynamických pseudotříd dodržujte jedno klíčové pravidlo: neměňte velikost. Hrajte si klidně s barvami, pozadím či měňte zobrazený obrázek, ale nesahejte na velikost písma, nepřepínejte mezi normálním a tučným, neměňte šířku rámečku a podobně. Dynamické změny by zkrátka neměly měnit velikost prvku, jehož se týkají. Jinak by klient při každé změně musel přeformátovat celý blok (a případně i další části stránky), což je pro uživatele krajně frustrující. Ostatně, podívejte se sami na odstrašující příklad.

Speciální

Několik dalších pseudotříd umožňuje vytvářet v selektorech různé pokročilé konstrukce. Patří sem:

is

prvky vyhovující některému z obsažených selektorů

first-child

první mezi sourozenci

has

obsahuje prvky vyhovující obsaženému selektoru

last-child

poslední mezi sourozenci

not

prvky, které nevyhovují selektoru

nth-child

N-tý sourozenec

nth-last-child

N-tý sourozenec od konce

nth-of-type

N-tý sourozenec stejného typu

nth-last-of-type

N-tý sourozenec stejného typu od konce

only-child

jediný sourozenec

only-of-type

jediný sourozenec stejného typu

where

prvky vyhovující některému z obsažených selektorů