Pseudo-classe nth-last-of-type
La pseudo-classe nth-last-of-type seleziona
un elemento che è l'ennesimo discendente
del genitore del tipo specificato, contando dalla fine.
Si comporta in modo simile a nth-of-type,
solo che il conteggio avviene dalla fine.
Sintassi
cssselettore:nth-last-of-type(numero | odd | even | espressione) {
}
Valori
| Valore | Descrizione |
|---|---|
| numero |
Un numero positivo a partire da 1.
Specifica il numero dell'elemento a cui vogliamo
accedere. La numerazione degli elementi inizia da 1.
|
odd |
Elementi dispari. |
even |
Elementi pari. |
| espressione |
È possibile creare espressioni speciali con la lettera n,
che rappresenta tutti i numeri interi da zero (non da uno)
a infinito. Quindi, 2n significa tutti i numeri pari
(a partire dal secondo).
Come capirlo? Sostituiamo in n in sequenza
i numeri da 0 in poi: se n = 0, allora 2n darà 0 -
un tale elemento non esiste (la numerazione degli elementi parte da 1),
se n = 1, allora 2n darà 2 - il secondo elemento, se n = 2,
2n dà 4 - il quarto elemento. Se scriviamo 3n - questo
sarà ogni terzo elemento (a partire dal terzo), e così via.
|
Esempio
Troviamo l'h2 che è il 2° h2
nel genitore dalla fine:
html<div>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
</div>cssh2:nth-last-of-type(2) {
color: red;
}
Результат:
Esempio
Troviamo tutti gli h2 pari dalla fine:
html<div>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
</div>cssh2:nth-last-of-type(even) {
color: red;
}
Результат:
Esempio
Troviamo tutti gli h2 dispari dalla fine:
html<div>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
<h2>titolo</h2>
<p>paragrafo</p>
</div>cssh2:nth-last-of-type(odd) {
color: red;
}
Результат: