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.

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šítvené 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 tři 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 pozornost. Pozornost se typicky přenáší klávesou Tab a v praxi znamená, že dotyčný prvek má přidělenu klávesnici.

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ů.

Vzhledem k chybám v prohlížečích se doporučuje definovat pseudotřídy pro odkazy v tomto pořadí (mnemotechnícká pomůcka „LoVe HA“):

link
visited
hover
active

Starší prohlížeče (včetně MS Internet Exploreru, přinejmenším do verze 6) bohužel podporovaly dynamické pseudotřídy jen o odkazů. V současnosti už by následující příklady neměly působit problémy, ale pokud by se snad váš prohlížeč nechoval popisovaným způsobem, zkuste Firefox nebo Chrome.

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.