Pseudo-classe CSS :nth-of-type()

Definizione e uso

CSS :nth-of-type(n) del tipo (nome del tag) dell'elemento genitore. n di un elemento figlio. I pseudo-classe vengono utilizzati per abbinare l'elemento figlio che è il

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

Suggerimento:Vai :nth-child() I pseudo-classe vengono utilizzati per selezionare l'elemento figlio che è il n di un elemento figlio, indipendentemente dal suo tipo.

Esempio

Esempio 1

Come usare :nth-of-type() Selettore:

/* Seleziona il secondo elemento tra gli elementi div fratelli */
div:nth-of-type(2) {
  background: red;
}
/* Seleziona il secondo elemento li nella lista */
li:nth-of-type(2) {
  background: verde chiaro;
}
/* Seleziona ogni terzo elemento in ogni gruppo di fratelli */
:nth-of-type(3) {
  background: yellow;
}

Prova tu stesso

Esempio 2

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

In questo caso, assegniamo colori di sfondo diversi agli elementi <p> con indici dispari e pari:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

Prova tu stesso

Esempio 3

Utilizza la formula (an + b) Descrizione:a Rappresenta un passo intero, n è ogni intero non negativo a partire da 0,b è un offset intero.

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

p:nth-of-type(3n+0) {
  background: red;
}

Prova tu stesso

Esempio 4

In questo caso, assegniamo il colore di sfondo agli elementi <p> con un indice multiplo di 3. Poi sottraiamo 1 (sceglieremo il secondo, il quinto, l'ottavo ecc.):

p:nth-of-type(3n-1) {
  background: red;
}

Prova tu stesso

Sintassi CSS

:nth-of-type(indice | dispari | pari | an+b) {
  declarazioni CSS;
}

Dettagli tecnici

Supporto del browser

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