Dosud popsané selektory již dovolují mnoho. Existují však některé speciální případy, které je potřeba ošetřit samostatně. Pro tyto účely slouží další speciální selektory označované jako pseudotřídy. Jejich specialita spočívá v tom, že nejsou svázány s žádným konkrétním elementem stránky. Prohlížeč si pouze podle aktuální stavu stránky nebo pozice elementu ve stránce domyslí, na které části stránky je má aplikovat. Existuje několik druhů pseudotříd, podle toho, jaký účel plní.
Dynamické pseudotřídy dovolují reagovat na interakci uživatele
se stránkou. Nejznámější pseudotřídou je :hover. Je jí
možné kombinovat s ostatními selektory a pravidlo odpovídající danému
selektor se aktivuje pouze v případě, že na odpovídající element
najedeme myší. Pokud bychom například chtěli, aby se text odkazu
podbarvil žlutě v okamžiku, kdy na něj najedeme, stačí do stylu přidat
jednoduché pravidlo:
a:hover { background-color: yellow; }
Podobné využití má i pseudotřída :focus, která
vybere element přijímající v danou chvíli vstup uživatle. Typicky se
jedná například o pole formuláře, ve kterém je právě kurzor a budou se
do něj vkládat znaky, které napíšeme na klávesnici. U větších
formulářů může být opět praktické podbravit vstupní pole, které se
právě bude editovat – uživatel se tak bude ve formuláži lépe
orientovat.
input:focus, textarea:focus { background-color: yellow; }
Další dvě pseudotřídy :link a :visited
se vztahují pouze na odkazy, pokud je použijeme na jiných elementech
nemají efekt. Slouží k odlišení formátování nenavštívených a
navštívených odkazů.
:link { color: blue } /* nenavštívený odkaz */
:visited { color: navy } /* navštívený odkaz */
