: n-dítě - Triky CSS

:nth-childVolič umožňuje vybrat jeden nebo více prvků na základě jejich zdrojové pořadí, podle vzorce.

/* 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) ( )

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 stavíme mřížku CSS a chceme odstranit okraj na každém čtvrtém mřížkovém modulu. Tady je HTML:

 One Two Three Four Five 

Místo přidání třídy ke každé čtvrté položce (např. .last) Můžeme použít :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

:nth-childVolič se argument: to může být jeden celé číslo, klíčová slova even, oddnebo vzorec. 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ě jako při procházení položek v poli JavaScriptu. Klíčová slova „sudý“ a „lichý“ jsou přímočará (2, 4, 6 atd. Nebo 1, 3, 5). 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ý čtvrtý prvek pomocí vzorce 4n, který fungoval, protože pokaždé, když byl prvek zkontrolován, se „n“ zvýšilo o jeden (4 × 0, 4 × 1, 4 × 2, 4 × 3 atd.). Pokud se pořadí prvku shoduje s výsledkem rovnice, bude vybrán (4, 8, 12 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-childselektorů:

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

• Tester triků CSS
• Tester Lea Verou

: nth-child (an + b of)

Existuje málo známý filtr, do kterého lze přidat :nth-childpodle specifikace CSS Selectors: Schopnost vybrat :nth-childpodmnožinu prvků pomocí of formátu. Předpokládejme, že máte seznam smíšeného obsahu: Některé mají třídu .video, jiné třídu .picturea chcete vybrat první 3 obrázky. Můžete to udělat s filtrem „of“ takto:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Všimněte si, že se to liší od připojení selektoru přímo 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 být trochu matoucí, takže příklad může pomoci ilustrovat rozdíl:

Podpora prohlížeče pro filtr „of“ je velmi omezená: V době psaní tohoto článku podporovala syntaxi pouze Safari. Chcete-li zkontrolovat stav svého oblíbeného prohlížeče, jsou zde otevřené problémy související s :nth-child(an+b of s):

• Firefox: Podpora nth-child (An + B of sel)
• Chrome: Implementace: nth-child (an + b of S)

Body zájmu

• :nth-childiteruje prvky počínaje od horní části zdrojové objednávky. Jediný rozdíl mezi ním a tím :nth-last-childje, že tento iteruje prvky, které začínají od spodní části zdrojové objednávky.
• Syntaxe pro výběr prvního npočtu prvků je trochu protiintuitivní. Začnete s -nplus kladným počtem prvků, které chcete vybrat. Například li:nth-child(-n+3)vybere první 3 liprvky.
• :nth-childVolič je velmi podobná :nth-of-type, ale s jedním kritickým rozdílem, že je méně specifické. V našem příkladu výše by produkovali stejný výsledek, protože iterujeme pouze nad .moduleprvky, 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-child-it může vybrat jakýkoli sourozenecký prvek v uspořádání, nejen prvky, které jsou uvedeny před dvojtečkou.

Podpora prohlížeče

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
Žádný	3,2+	Žádný	9,5+	9+	Žádný	Žádný

:nth-childbyl 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.