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.
Poslední komentáře