: nth-child - CSS-tricks

Med :nth-childväljaren kan du välja ett eller flera element baserat på deras källordning, enligt en formel.

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

Det definieras i CSS Selectors nivå 3-specifikationen som en "strukturell pseudoklass", vilket betyder att den används för att utforma innehåll baserat på dess förhållande till föräldra- och syskonelement.

Antag att vi bygger ett CSS-rutnät och vill ta bort marginalen på var fjärde nätmodul. Här är den HTML:

 One Two Three Four Five 

I stället för att lägga till en klass till vart fjärde objekt (t.ex. .last) kan vi använda :nth-child:

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

Den :nth-childväljare tar ett argument: detta kan vara ett enda heltal, nyckelord even, oddeller en formel. Om ett heltal specificeras väljs endast ett element - men nyckelorden eller en formel kommer att upprepas genom alla underordnade element och välja matchande element - liknande navigeringsobjekt i en JavaScript-array. Nyckelorden "jämn" och "udda" är enkla (2, 4, 6, etc. eller 1, 3, 5). Formeln är konstruerad med syntax an+b, där:

• “A” är ett heltal
• "N" är bokstavsbokstaven "n"
• "+" Är en operatör och kan vara antingen "+" eller "-"
• “B” är ett heltal och krävs om en operatör ingår i formeln

Det är viktigt att notera att denna formel är en ekvation, och den går igenom varje syskonelement och bestämmer vilken som ska väljas. "N" -delen av formeln, om den ingår, representerar en uppsättning av ökande positiva heltal (precis som att det går igenom en matris). I vårt ovanstående exempel valde vi vart fjärde element med formeln 4n, som fungerade eftersom varje gång ett element kontrollerades ökade “n” med ett (4 × 0, 4 × 1, 4 × 2, 4 × 3, etc). Om ett elements ordning matchar resultatet av ekvationen, blir den vald (4, 8, 12, etc). För en mer fördjupad förklaring av matematiken, läs den här artikeln.

För att illustrera ytterligare, här är några exempel på giltiga :nth-childväljare:

Lyckligtvis behöver du inte alltid göra matte själv - det finns flera :nth-childtestare och generatorer där ute:

• CSS-Tricks Tester
• Lea Verous testare

: nth-child (an + b of)

Det finns ett lite känt filter som kan läggas till :nth-childenligt CSS Selectors specifikation: Möjligheten att välja :nth-childen delmängd av element, med hjälp av of formatet. Antag att du har en lista med blandat innehåll: Vissa har klassen .video, andra har klassen .pictureoch du vill välja de tre första bilderna. Du kan göra det med "of" -filtret så:

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

Observera att detta skiljer sig från att lägga till en väljare direkt till :nth-childväljaren:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Detta kan bli lite förvirrande, så ett exempel kan hjälpa till att illustrera skillnaden:

Webbläsarstöd för "of" -filtret är mycket begränsat: I skrivande stund har endast Safari stöd för syntaxen. För att kontrollera status för din favoritwebbläsare, här är öppna frågor relaterade till :nth-child(an+b of s):

• Firefox: Stöd för nth-child (An + B of sel)
• Chrome: Redskap: nth-child (an + b of S)

Intressanta platser

• :nth-childitererar genom element som börjar från toppen av källordningen. Den enda skillnaden mellan den och :nth-last-childär att den senare itererar genom element som börjar från botten av källordningen.
• Syntaxen för att välja det första nantalet element är lite kontraintuitivt. Du börjar med -nplus det positiva antalet element du vill välja. Till exempel li:nth-child(-n+3)kommer att välja de första 3 lielementen.
• Den :nth-childväljare är mycket likt :nth-of-type, men med en viktig skillnad: det är mindre specifik. I vårt exempel ovan skulle de producera samma resultat eftersom vi itererar endast över .moduleelement, men om vi itererade över en mer komplex grupp av syskon :nth-childskulle vi försöka matcha alla syskon, inte bara syskon av samma elementtyp. Detta avslöjar kraften i :nth-child-it kan välja vilket syskonelement som helst i ett arrangemang, inte bara element som anges före kolon.

Webbläsarstöd

Krom	Safari	Firefox	Opera	IE	Android	iOS
Några	3.2+	Några	9,5+	9+	Några	Några

:nth-childintroducerades i CSS Selectors Module 3, vilket innebär att gamla versioner av webbläsare inte stöder det. Modernt webbläsarsupport är dock oklanderligt och de nya pseudoväljarna används ofta i produktionsmiljöer. Om du behöver äldre webbläsarsupport, antingen polyfill för IE, eller använd dessa väljare på icke-kritiska sätt på en progressiv förbättring, vilket rekommenderas.