CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} pseudo-classe per abbinare come elemento figlio del suo elemento padre il n qualsiasi elemento figlio di un elemento.

Questo pseudo-classe abbinisce gli elementi in base all'indice dell'elemento nella lista dei figli del suo elemento padre.

n può essere un numero/indice, una parola chiave (dispari o pari) o una formula (come an + b)

Suggerimento:Vedi :nth-of-type() pseudo-classe per selezionare come elemento figlio del suo elemento padrestesso tipo (nome del tag)del n un qualsiasi elemento figlio di un elemento.

Esempio

Esempio 1

Come usarla :nth-child() Pseudo-classe:

/* Seleziona ogni quarto elemento in ogni gruppo di fratelli */
:nth-child(4) {
  background-color: yellow;
}
/* Seleziona il secondo elemento tra i fratelli div */
div:nth-child(2) {
  background-color: red;
}
/* Seleziona il secondo elemento li della lista */
li:nth-child(2) {
  background-color: lightgreen;
}

Prova tu stesso

Esempio 2

dispari e pari è una parola chiave, utilizzabile per abbinare elementi con indici dispari o pari (l'indice del primo figlio è 1).

Qui, assegniamo colori di sfondo diversi ai <p> elementi con indici dispari e pari:

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

Prova tu stesso

Esempio 3

usando la formula (an + b) Descrizione:a è un passo intero, n sono tutti gli interi non negativi che iniziano da 0,b è un offset intero.

Qui, assegniamo il colore di sfondo ai <p> elementi con un indice multiplo di 3 (sceglieremo il terzo, il sesto, il nono, ecc...):

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

Prova tu stesso

Esempio 4

Qui, assegniamo il colore di sfondo ai <p> elementi con un indice multiplo di 3. Poi sottraiamo 1 (sceglieremo il primo, il quarto, il settimo, ecc...):

p:nth-child(3n-1) {
  background-color: red;
}

Prova tu stesso

Sintassi CSS

:nth-child(indice | dispari | pari | an+b) {
  dichiarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta il pseudo-classe per la prima volta.