Selektor nth-child aneb CSS a liché či sudé prvky

V CSS je možné vybrat lichý či sudý řádek v tabulce nebo dát jiný styl každému třetímu sloupci tabulky, nebo odstranit styl u prvku, který je v pořadí "n-tý". Pojďme se podívat jak na to.

Máme k dispozici CSS selektor, tzv. nth-child. Zde je příklad a jeho použití je následující:

ul li : nth-child ( 3n + 3 ) {
  color : #ccc;
}

Co se výše uvedené CSS dělá, je, že vybere každý třetí prvek seznamu uvnitř elementu UL. To znamená, 3., 6., 9., 12., atd. Ale jak to vlastně funguje? A co jiného lze s nth-child udělat? Pojďme se podívat.

To nejdůležitější se skrývá v závorce. nth-child akceptuje dvě klíčová slova: even a odd . Ta by měla být zcela zřejmá. "Even" vybere jenom sudé prvky, jako 2., 4., 6., atd. "Odd" vybírá zase jenom liché prvky, jako 1., 3., 5., atd.

Jak je vidět v prvním příkladu, nth-child akceptuje v závorkách i "rovnice", řekl bych hodně jednoduché rovnice. Klidně zde může být uvedeno jenom číslo. Pokud dáte do závorky pouze číslo, bude vyhodnocen jenom ten prvek, který mu v pořadí odpovídá. Například, tady je vybrán pouze 5. element:

ul li : nth-child ( 5 ) {
  color : #ccc;
}

Pojďme ale zpět k "3n +3" z původního příkladu. Jak to funguje? Proč tento příkaz vybere každý třetí element? Trik je v chápání "n" a algebraické rovnice. Postupně si za "n" doplňme přirozená čísla, začněme od nuly. Takže 3n je "3xn", a celá rovnice spolu se "(3xn) +3". Pokud tedy postupně dosadíme za "n", dostaneme:

(3 x 0) + 3 = 3 = 3. Element
(3 x 1) + 3 = 6 = 6. Element
(3 x 2) + 3 = 9 = 9. Element

nth-child (2n +1)?

(2 x 0) + 1 = 1 = 1. Element
(2 x 1) + 1 = 3 = 3. Element
(2 x 2) + 1 = 5 = 5. Element

Ano! To je stejné jako "odd", takže asi není nutné používat zápis pomocí rovnice. Ale počkat, copak je náš první příklad tak složitý? Co kdybychom místo "3n +3", použili "3n +0", nebo dokonce jednodušší "3n".

(3 x 0) = 0 = není shoda
(3 x 1) = 3 = 3. Element
(3 x 2) = 6 = 6. Element
(3 x 3) = 9 = 9. Element

Takže jak vidíte, shody jsou naprosto stejné. Můžeme použít záporné hodnoty n, stejně jako můžeme využít odčítání v rovnicích. Například, 4n-1:

(4 x 0) - 1 = -1 = není shoda
(4 x 1) - 1 = 3 = 3. Element
(4 x 2) - 1 = 7 = 7. Element

Použití "-n" hodnoty se může jevit trochu zvláštně, protože pokud je konečný výsledek záporný, tak vlastně nikdy nemůže dojít ke shodě, takže budete muset přemýšlet, jak se dostat zpátky do kladných čísel. Můžete ale tento trok použít k výběru "prvního n prvku" např. "-n +3":

-0 + 3 = 3 = 3. Element
-1 + 3 = 2 = 2. Element
-2 + 3 = 1 = 1. Element
-3 + 3 = 0 = není shoda

Přehledná tabulka

Jednoduše si můžeme vytvořit hezkou tabulku:

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	-	-	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	-
4	9	17	20	16	18	-
5	11	21	24	20	23	-

Kompatibilita prohlížečů

IE5.5	IE6	IE7	IE8	IE9	FF3, FF4	Saf 4,5	Chrome 4,5	Opera 10	Konqueror 4.x
Ne				Ano	Ne	Ano	Ano	nesprávně	???

nth-child je jedním z CSS selektorů, které uvízly na pomezí plné kompatibility mezi prohlížeči. Pokud pomineme zcela nulovou podporu v IE, dokonce i v IE8. Můžeme tento selektor použít, pokud konečným výsledkem má být zcela bez pochyb "progresivní zlepšení" v designu prvku (např. využití barevné palety na řádek (řádky) tabulky). Pokud se v daném případě dá akceptovat fakt, že v některých prohlížečích se barvičky jednoduše neprojeví, pak hurá na věc.

Pokud ale vytváříte nějaký stěžejní prvek, tak se na tento selektor není radno spoléhat. Obzvlášť v případě, kdy navrhujete rozložení webu (tzv. layout). Ale je-li například potřeba potěšit oko návštěvníka tak, že odstraníte pravý okraj od každé třetí buňky v tabulce, bude se tento selektor více než hodit.

V případě že používáte jQuery, tak vše, co zde bylo uvedeno, je možné aplikovat do selektorů jQuery. Mrkněte do manuálu, najdete tam nejen selektor nth-child, ale i další a sofistikovanější metody, jak genericky vybírat elementy na stránce.