Med :nth-of-typeväljaren kan du välja ett eller flera element baserat på deras källordning enligt en formel. Det definieras i CSS Selectors nivå 3-specifikationen som en "strukturell pseudoklass", vilket innebär att den används för att utforma innehåll baserat på dess förhållande till föräldra- och syskonelement.
Anta att vi har en oordnad lista och vill “zebra-stripe” alternerande listobjekt:
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Istället för att lägga till klasser i varje listobjekt (t.ex. .even& .odd) kan vi använda :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Som du kan se :nth-of-typetar ett argument: detta kan vara ett enda heltal, nyckelorden "jämnt" eller "udda" eller en formel som visas ovan. Om ett heltal anges väljs bara ett element - men nyckelorden eller en formel kommer att upprepas genom alla underordnade element och välja matchande element som liknar navigeringsobjekt i en matris i JavaScript. Nyckelorden "jämn" och "udda" är enkla, men formeln är konstruerad med hjälp av syntaxen 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 vartannat element med formeln 2n, som fungerade för att varje gång ett element kontrollerades ökade "n" med ett (2 × 0, 2 × 1, 2 × 2, 2 × 3, etc). Om ett elements ordning matchar resultatet av ekvationen, blir den vald (2, 4, 6, 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-of-typeväljare:
Lyckligtvis behöver du inte alltid göra matte själv - det finns flera :nth-of-typetestare och generatorer där ute:
- CSS-Tricks Tester
- Lea Verous testare
Intressanta platser
:nth-of-typeitererar genom element som börjar från toppen av källordningen. Den enda skillnaden mellan den och:nth-last-of-typeär att den senare itererar genom element som börjar från botten av källordningen.- Den
:nth-of-typeväljare är mycket likt:nth-child, men med en viktig skillnad: det är mer specifik. I vårt exempel ovan skulle de producera samma resultat eftersom vi itererar endast överlielement, 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 hos:nth-of-type-it riktar sig mot en viss typ av element i ett arrangemang i förhållande till liknande syskon, inte alla syskon.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | 3.2+ | Arbetar | 9,5+ | 9+ | Arbetar | Arbetar |
:nth-of-typeintroducerades 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.