CSS :nth-of-type() Pseudo Classe
La pseudo-classe CSS :nth-of-type() seleziona elementi dello stesso tipo. Scopri come usarla con esempi pratici.
La pseudo-classe :nth-of-type() corrisponde agli elementi in base alla loro posizione tra i fratelli dello stesso tipo (lo stesso nome di tag). Il conteggio parte da 1, quindi p:nth-of-type(1) è il primo <p> in un genitore, il secondo <p> è 2, e così via.
L'argomento all'interno delle parentesi può essere un numero singolo, la parola chiave odd o even, oppure una formula nella forma an + b. Questo la rende un modo flessibile per stilizzare "ogni terzo elemento", "tutte le righe pari" o "tutto dopo il primo" senza aggiungere classi extra al tuo HTML.
:nth-of-type() vs :nth-child()
Questa è la distinzione che crea più confusione, quindi vale la pena essere precisi.
:nth-child()conta tutti gli elementi fratelli, poi verifica se l'elemento corrispondente sia del tipo richiesto.:nth-of-type()conta solo i fratelli dello stesso tipo, ignorando tutto il resto.
Considera questo markup:
<div>
<h2>Heading</h2>
<p>Paragraph A</p>
<p>Paragraph B</p>
</div>p:nth-child(2)seleziona Paragraph A — è il 2° figlio in totale ed è un<p>.p:nth-of-type(2)seleziona Paragraph B — è il 2°<p>, indipendentemente dall'<h2>che lo precede.
Usa :nth-of-type() quando il genitore contiene tipi di elementi diversi e vuoi contare solo uno di essi.
Versione
Sintassi
Sintassi CSS :nth-of-type()
:nth-of-type(number | odd | even | an+b) {
css declarations;
}L'argomento accetta:
- Un numero —
:nth-of-type(3)punta al 3° elemento di quel tipo. odd/even— parole chiave comode per elementi alternati (odd= 1, 3, 5…;even= 2, 4, 6…).- Una formula
an + b— ad esempio:nth-of-type(3n)corrisponde a ogni 3° elemento, e:nth-of-type(2n+1)equivale aodd. Quinparte da0e aumenta,aè il passo ebè lo scostamento.
Esempio del selettore :nth-of-type():
Esempio di codice CSS :nth-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Esempio di :nth-of-type con "odd" e "even":
Un altro esempio di codice CSS :nth-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-of-type(odd) {
background: #1c87c9;
}
p:nth-of-type(even) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>nth-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</body>
</html>Usare una formula an+b
Una formula consente di individuare un pattern ripetuto. L'esempio seguente evidenzia ogni 3° paragrafo (3n) e, separatamente, ogni paragrafo a partire dal 4° (n+4):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-of-type(3n) {
background: #8ebf42;
}
p:nth-of-type(n + 4) {
font-weight: bold;
}
</style>
</head>
<body>
<h2>nth-of-type() formula example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Con 3n, i paragrafi 3 e 6 ottengono lo sfondo verde. Con n + 4, i paragrafi 4, 5 e 6 sono in grassetto (ogni paragrafo a partire dal 4°).
Da sapere
- Il conteggio parte da 1, non da 0.
:nth-of-type(1)è il primo risultato e si comporta come:first-of-type. - "Tipo" indica il nome del tag, non una classe.
:nth-of-type()non può contare specificamente gli elementi.item— conta tutti gli elementi con quel tag tra i fratelli. Se scrivi.item:nth-of-type(2), corrisponde a un elemento che è sia il 2° del suo tipo sia portatore della classeitem. - Per contare dalla fine dell'elenco invece che dall'inizio, usa
:nth-last-of-type().
Pagine correlate
- CSS :nth-child() pseudo-class
- CSS :nth-last-of-type() pseudo-class
- CSS :first-of-type pseudo-class
- CSS :last-of-type pseudo-class
- CSS :only-of-type pseudo-class