:nth-childVolič umožňuje vybrať jeden alebo viacero prvkov na základe ich zdrojové poradí, podľa vzorca.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )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 budujeme mriežku CSS a chceme odstrániť okraj na každom štvrtom module mriežky. Toto je HTML:
One Two Three Four Five Namiesto pridania triedy ku každej štvrtej položke (napr. .last) Môžeme použiť :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childVolič sa argument: to môže byť jeden celé číslo, kľúčové slová even, oddalebo vzorec. 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ú zodpovedajúce prvky - podobne ako pri navigácii v položkách v poli JavaScriptu. Kľúčové slová „párne“ a „nepárne“ sú priame (2, 4, 6 atď. Alebo 1, 3, 5). 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ý štvrtý prvok so vzorcom 4n, ktorý fungoval, pretože pri každej kontrole prvku sa „n“ zvýšilo o jeden (4 × 0, 4 × 1, 4 × 2, 4 × 3 atď.). Ak sa poradie prvku zhoduje s výsledkom rovnice, vyberie sa (4, 8, 12 atď.). Podrobnejšie vysvetlenie matematiky sa dozviete v tomto článku.
Na ilustráciu uvádzame niekoľko príkladov platných :nth-childselektorov:
Našťastie nemusíte vždy robiť matematiku sami - existuje niekoľko :nth-childtesterov a generátorov:
- Tester trikov CSS
- Tester Lea Verou
: n-te dieťa (an + b)
Existuje málo známy filter, do ktorého je možné pridať :nth-childpodľa špecifikácie CSS Selectors: Schopnosť vybrať :nth-childpodmnožinu prvkov pomocou of formátu. Predpokladajme, že máte zoznam zmiešaného obsahu: Niektoré majú triedu .video, iné triedu .picturea chcete vybrať prvé 3 obrázky. Môžete to urobiť s filtrom „of“ takto:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Toto sa líši od pridania selektora priamo k :nth-childselektoru:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )To môže byť trochu mätúce, takže príklad môže pomôcť ilustrovať rozdiel:
Podpora prehľadávača pre filter „of“ je veľmi obmedzená: v čase písania tohto článku podporovala syntax iba Safari. Ak chcete skontrolovať stav svojho obľúbeného prehliadača, tu sú otvorené problémy týkajúce sa :nth-child(an+b of s):
- Firefox: Podpora pre n -te dieťa (An + B of sel)
- Chrome: Implementácia: n-dieťa (an + b of S)
Body záujmu
:nth-childiteruje prvkami začínajúcimi od hornej časti zdrojovej objednávky. Rozdiel je iba v tom:nth-last-child, že tento iteruje prvkami začínajúcimi od dolnej časti zdrojovej objednávky.- Syntax pre výber prvého
npočtu prvkov je trochu protiintuitívna. Začínate s-nplus plus kladný počet prvkov, ktoré chcete vybrať. Napríkladli:nth-child(-n+3)vyberie prvé 3liprvky. :nth-childVolič je veľmi podobná:nth-of-type, ale s jedným kritickým rozdielom, že je menej špecifické. V našom príklade vyššie by priniesli rovnaký výsledok, pretože iterujeme iba nad.moduleprvkami, 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. Toto odhaľuje silu funkcie:nth-child-it môže vybrať ľubovoľného súrodeneckého prvku v usporiadaní, nielen prvky určené pred dvojbodkou.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| akýkoľvek | 3,2+ | akýkoľvek | 9,5+ | 9+ | akýkoľvek | akýkoľvek |
:nth-childbol 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.