CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} pseudoklasser för att matcha element som är som n underelement

denna pseudoklass matchar element baserat på dess index i en underlista av dess förälder.

n kan vara ett nummer/index, ett nyckelord (udda eller jämna) eller en formel (som an + b)

Tips:Se :nth-of-type() pseudoklasser för att välja element som är somav samma typ (taggnamn)s n en underelement.

Exempel

Exempel 1

Hur man använder :nth-child() Pseudoklasser:

/* Välj varje fjärde element i en grupp av syskon */
:nth-child(4) {
  background-color: gult;
}
/* Välj den andra elementen i en grupp av syskon */
div:nth-child(2) {
  background-color: röd;
}
/* Välj den andra li-elementen i listan */
li:nth-child(2) {
  background-color: ljusgrön;
}

Prova själv

Exempel 2

udda och jämna är en nyckelord, kan användas för att matcha element med udda eller jämna index (det första elementets index är 1).

Här anger vi olika bakgrundsfärger för <p>-element med udda och jämna index:

p:nth-child(udda) {
  background-color: röd;
}
p:nth-child(jämna) {
  background: ljusgrön;
}

Prova själv

Exempel 3

Använd formeln (an + b) Beskrivning:a representerar en heltalsskala, n är alla icke-negativa heltal som börjar vid 0,b är en heltalsförskjutning.

Här anger vi bakgrundsfärg för alla <p>-element med index som är multipel av 3 (detta väljer den tredje, sjätte, nionde elementen osv.):

p:nth-child(3n+1) {
  background-color: röd;
}

Prova själv

Exempel 4

Här anger vi bakgrundsfärg för alla <p>-element med index som är multipel av 3. Därefter subtraherar vi 1 (detta väljer den första, fjärde, sjunde elementen osv.):

p:nth-child(3n-1) {
  background-color: röd;
}

Prova själv

CSS-syntax

:nth-child(index | udda | jämna | an+b) {
  css-uttryck;
}

Tekniska detaljer

Webbläsarstöd

Talen i tabellen anger den första webbläsarversion som fullständigt stöder den här pseudoklassen.