: n-tý typ - Triky CSS

:nth-of-typeVolič umožňuje vybrat jeden nebo více prvků na základě jejich zdrojové pořadí, podle vzorce. Ve specifikaci CSS Selectors Level 3 je definována jako „strukturní pseudotřída“, což znamená, že se používá ke stylování obsahu na základě jeho vztahu k nadřazeným a sourozeneckým prvkům.

Předpokládejme, že máme neuspořádaný seznam a přejeme si „zebra-stripe“ položky střídavého seznamu:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Místo přidávání tříd do jednotlivých položek seznamu (např. .even& .odd) Můžeme použít :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Jak vidíte, :nth-of-typevezme argument: může to být jedno celé číslo, klíčová slova „sudá“ nebo „lichá“ nebo vzorec, jak je uvedeno výše. Pokud je zadáno celé číslo, je vybrán pouze jeden prvek - ale klíčová slova nebo vzorec budou iterovat všemi podřízenými prvky nadřazeného prvku a vyberou odpovídající prvky podobné navigaci položek v poli v JavaScriptu. Klíčová slova „even“ a „odd“ jsou přímočará, ale vzorec je sestaven pomocí syntaxe an+b, kde:

• „A“ je celočíselná hodnota
• „N“ je doslovné písmeno „n“
• „+“ Je operátor a může to být „+“ nebo „-“
• „B“ je celé číslo a je vyžadováno, pokud je do vzorce zahrnut operátor

Je důležité si uvědomit, že tento vzorec je rovnice a iteruje každým prvkem sourozence a určuje, který bude vybrán. Část vzorce „n“, pokud je zahrnuta, představuje sadu zvyšujících se kladných celých čísel (stejně jako iterace v poli). V našem výše uvedeném příkladu jsme vybrali každý druhý prvek pomocí vzorce 2n, který fungoval, protože při každé kontrole prvku se „n“ zvýšilo o jeden (2 × 0, 2 × 1, 2 × 2, 2 × 3 atd.). Pokud se pořadí prvku shoduje s výsledkem rovnice, bude vybrán (2, 4, 6 atd.). Podrobnější vysvětlení zapojené matematiky naleznete v tomto článku.

Pro další ilustraci uvádíme několik příkladů platných :nth-of-typeselektorů:

Podívejte se na toto pero!

Naštěstí nemusíte vždy dělat matematiku sami - existuje několik :nth-of-typetesterů a generátorů:

• Tester triků CSS
• Tester Lea Verou

Body zájmu

• :nth-of-typeiteruje prvky počínaje od horní části zdrojové objednávky. Jediný rozdíl mezi ním a tím :nth-last-of-typeje, že tento iteruje prvky, které začínají od spodní části zdrojové objednávky.
• :nth-of-typeVolič je velmi podobná :nth-child, ale s jedním kritickým rozdílem, že je specifická. V našem příkladu výše by produkovali stejný výsledek, protože iterujeme pouze nad liprvky, ale pokud bychom iterovali nad složitější skupinou sourozenců, :nth-childpokusili bychom se shodovat se všemi sourozenci, nejen se sourozenci stejného typu prvku. To odhaluje sílu :nth-of-type- zaměřuje se na určitý typ prvku v uspořádání ve vztahu k podobným sourozencům, ne všem sourozencům.

Podpora prohlížeče

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
Funguje	3,2+	Funguje	9,5+	9+	Funguje	Funguje

:nth-of-typebyl představen v modulu CSS Selectors Module 3, což znamená, že staré verze prohlížečů jej nepodporují. Podpora moderních prohlížečů je však dokonalá a nové pseudo-selektory jsou široce používány v produkčním prostředí. Pokud požadujete podporu starších prohlížečů, buď polyfill pro IE, nebo použijte tyto selektory nekritickými způsoby á la progresivní vylepšení, které se doporučuje.