: n-tý typ - Triky CSS

:nth-of-typeVolič umožňuje vybrať jeden alebo viacero prvkov na základe ich zdrojové poradí, podľa vzorca. Je definovaná v špecifikácii CSS Selectors úrovne 3 ako „štrukturálna pseudotrieda“, čo znamená, že sa používa na štýlovanie obsahu na základe jeho vzťahu s nadradenými a súrodeneckými prvkami.

Predpokladajme, že máme neusporiadaný zoznam a chceme striedať položky v zozname „zebra-stripe“:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Namiesto pridávania tried do každej položky zoznamu (napr. .even& .odd) Môžeme použiť :nth-of-type:

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

Ako vidíte, :nth-of-typevezme argument: môže to byť celé číslo, kľúčové slová „párne“ alebo „nepárne“ alebo vzorec, ako je uvedené vyššie. Ak je zadané celé číslo, je vybraný iba jeden prvok - kľúčové slová alebo vzorec však budú iterovať cez všetky podradené prvky nadradeného prvku a vyberú podobné prvky podobné navigácii po položkách v poli v JavaScripte. Kľúčové slová „párne“ a „nepárne“ sú jednoduché, ale vzorec je zostavený pomocou syntaxe an+b, kde:

• „A“ je celočíselná hodnota
• „N“ je doslovné písmeno „n“
• „+“ Je operátor a môže to byť „+“ alebo „-“
• „B“ je celé číslo a je potrebné, ak je do vzorca zahrnutý operátor

Je dôležité poznamenať, že tento vzorec je rovnica a iteruje cez každý súrodenecký prvok a určuje, ktorý bude vybraný. Časť „n“ vzorca, ak je zahrnutá, predstavuje množinu zvyšujúcich sa kladných celých čísel (rovnako ako iterácia poľom). V našom príklade vyššie sme vybrali každý druhý prvok so vzorcom 2n, ktorý fungoval, pretože pri každej kontrole prvku sa „n“ zvýšilo o jeden (2 × 0, 2 × 1, 2 × 2, 2 × 3 atď.). Ak sa poradie prvku zhoduje s výsledkom rovnice, vyberie sa (2, 4, 6 atď.). Podrobnejšie vysvetlenie matematiky sa dozviete v tomto článku.

Na ilustráciu uvádzame niekoľko príkladov platných :nth-of-typeselektorov:

Vyskúšajte toto pero!

Našťastie nemusíte vždy robiť matematiku sami - existuje niekoľko :nth-of-typetesterov a generátorov:

• Tester trikov CSS
• Tester Lea Verou

Body záujmu

• :nth-of-typeiteruje prvkami začínajúcimi od hornej časti zdrojovej objednávky. Rozdiel je iba v tom :nth-last-of-type, že tento iteruje prvkami začínajúcimi od dolnej časti zdrojovej objednávky.
• :nth-of-typeVolič je veľmi podobná :nth-child, ale s jedným kritickým rozdielom, že je špecifická. V našom príklade vyššie by priniesli rovnaký výsledok, pretože iterujeme iba nad liprvkami, ale ak by sme iterovali nad zložitejšou skupinou súrodencov, :nth-childpokúsili by sme sa spojiť so všetkými súrodencami, nielen so súrodencami rovnakého typu prvku. To odhaľuje silu :nth-of-type- zameriava sa na určitý typ prvku v usporiadaní vo vzťahu k podobným súrodencom, nie všetkým súrodencom.

Podpora prehľadávača

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Tvorba	3,2+	Tvorba	9,5+	9+	Tvorba	Tvorba

:nth-of-typebol predstavený v CSS Selectors Module 3, čo znamená, že staré verzie prehľadávačov ho nepodporujú. Avšak moderná podpora prehľadávačov je dokonalá a nové pseudo-selektory sa široko používajú v produkčných prostrediach. Ak požadujete podporu starších prehliadačov, buď polyfill pre IE, alebo použite tieto selektory nekritickými spôsobmi á la progresívne vylepšenie, ktoré sa odporúča.