CSS pseudo-třídy

Co to je? Třídy, které přidají speciální vlastnosti na některé prvky. Nejznámější pseudo-třídy jsou pro odkazy, např.: a:hover
Někdy se mi přehled docela hodí, na internetu jsem je vždy nacházel roztříštěné, většinou nebyly na jednom místě.

Obecný zápis je:
selektor:pseudo-třída {atribut:jeho_hodnota}
selektro.trida: pseudo-třída {atribut:jeho_hodnota}

Dynamické pseudo-třídy:

a:link {color: black;}         /* nenavštívený odkaz */
a:visited {color: red;}        /* navštívený odkaz */
a:hover {color: blue;}        /* reakce na myš */
a:active {color: green;}    /* vybraný odkaz */

Nejčastěji je používána kombinace
a {color: red;}            /* barva se aplikuje na všechny 4 pseudo-třídy */
a:hover {color: blue;}

Pořadí jednotlivých tříd je uvedena tak, jak by měla být, aby jednotlivé linky fungovaly, tj. třída hover musí být uvedena po link a visited, active musí být uvedena za hover,

input:fokus {background-color: red;}
/* změní barvu pozadí po aktivaci myší, funguje pouze na prvcích, které čekají na událost z klávesnice*/

První a poslední

Následující pseudo-třídy umožňují formátování prvních nebo posledních potomků jiných prvků.

li:first-child {color: red;}
/* li je potomek ul(ol), první výskyt obarví text zvolenou barvou */

li:last-child {color: green;}
/* li je potomek ul(ol), poslední výskyt obarví text zvolenou barvou */

p:first-letter {color: blue;}
/* vybere první písmeno z každého odstavce */

p:first-line {color: green;}
/* vybere první řádek odstavce; pro first-letter a first-line lze použít pouze následující atributy: font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, float, clear; first-letter a first-line budou fungovat pouze s blokovými prvky. */

*:lang(fr) {font-style: italic;}
/* vyznačí se všechna slova napsaná ve francouštině */

p:first-of-type {color: blue;}
/* vybere první prvek rodiče a na něm nastaví zvolenou barvu */

p:last-of-type {color: green;}
/* vybere poslední prvek rodiče a na něm nastaví zvolenou barvu*/

p:only-of-type {color: red;}
/* Vybere pouze takový prvek, který je pouze jediný potomek rodiče*/

p:olny-child {color: orange}
/* Vybere pouze takový prvek, který je jediným potomkem rodiče*/

p:nth-child(2) {color: blue;}
/* Vybere pouze jeden prvek, který je jako druhý v pořadí rodičovského prvku, IE7,8 nepodporuje */

p:nth-last-child(2) {color: red}
/* Změní barvu písma potomka rodičovského prvku počítáno od posledního výskytu, IE7,8 nepodporuje */

p.nth-of-type(2) {color: blue}
/* Změní barvu písma potomka rodičovského prvku počítáno od začátku, platí na výskyt p, IE7,8 nepodporuje  */

p.nth-last-of-type(2) {color: green}
/* Podobně jako předchozí, počítáno od konce. IE7,8 nepodporuje */

Ostatní

:root {background: red;}
/* Nastaví pozadí pro celý dokument html, IE7,8 nepodporuje  */

p:empty {color: red}
/* Nastaví barvu pro prázdné odstavce, IE7,8 nepodporuje */

:target:before {content: url(/images/lamp.gif)}
/*viz odkaz; neodzkoušeno; nefunguje v IE*/

input:enabled {background:red}
/* Na všechny povolené vstupní prvky aplikuje zvolenou barvu, IE7,8 nepodporuje */

input:disabled {background:green}
/* Na všechny nepovolené prvky aplikuje zvolenou barvu, IE7,8 nepodporuje */

input:checked {background:blue}
/* Na zaškrtávací pole aplikuje zvolenou barvu, funguje pouze v Opeře */

:not(p) {color: blue}
/* Všechny prvky v dokumentu, mimo vyjmenovaný, budou obarveny zvolenou barvou, IE7,8 nepodporuje  */

::selection  { color:#ff0000; }
::-moz-selection { color:#ff0000; }
/* myší označení prvky budou obarveny zvolenou barvou,  IE7,8 nepodporuje, pro Firefox zvlášť zápis, Jsou podporovány pouze některé atributy: color, background, cursor, outline */

Pokud jsem na nějakou pseudo-třídu zapomněl, budu rád, když ji v komentářích naznačíte, případně mi pošlete mail.

Update 26.20.2012:

Pseudo třídy můžeme doplnit o magické „n“. Příklad: p:nth-child(5n+1) – vybere první odstavec a následně pak každý pátý. Krom číselných operací, lze dosadit i klíčová slova odd a even – sudý a lichý, což je daleko zajímavější.

Zdroje:

CSS Selector Reference. W3SCHOOLS. Http://www.w3schools.com/ [online]. 6.4.2012 [cit. 2012-04-06]. Dostupné z: http://www.w3schools.com/cssref/css_selectors.asp
MEYER, Eric A. Eric Meyer o CSS: kompletní průvodce. Vyd. 1. Překlad Jan Pokorný. Brno: Zoner Press, 2007, 560 s. ISBN 978-80-86815-64-0.