Псевдокласс nth-last-of-type
El pseudoclase nth-last-of-type selecciona
un elemento que es el n-ésimo hijo
del tipo especificado de su padre, contando desde el final.
Se comporta de manera similar a nth-of-type,
pero el conteo se realiza desde el final.
Sintaxis
cssselector:nth-last-of-type(número | odd | even | expresión) {
}
Valores
| Valor | Descripción |
|---|---|
| número |
Número positivo comenzando desde 1.
Especifica el número del elemento al que queremos
acceder. La numeración de los elementos comienza desde 1.
|
odd |
Elementos impares. |
even |
Elementos pares. |
| expresión |
Se pueden componer expresiones especiales con la letra n,
que representa todos los números enteros desde cero (no desde uno)
hasta el infinito. Así, 2n significa todos los números pares
(comenzando desde el segundo).
¿Cómo entender esto? Sustituimos en n secuencialmente
números desde 0 y así sucesivamente: si n = 0, entonces 2n dará 0 -
no existe tal elemento (la numeración de elementos es desde 1),
si n = 1, entonces 2n dará 2 - el segundo elemento, si n = 2,
2n da 4 - el cuarto elemento. Si escribimos 3n - esto
será cada tercer elemento (comenzando desde el tercero), y así sucesivamente.
|
Ejemplo
Encontremos el h2 que es el 2-do h2
en el padre desde el final:
html<div>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
</div>cssh2:nth-last-of-type(2) {
color: red;
}
Результат:
Ejemplo
Encontremos todos los h2 pares desde el final:
html<div>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
</div>cssh2:nth-last-of-type(even) {
color: red;
}
Результат:
Ejemplo
Encontremos todos los h2 impares desde el final:
html<div>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
</div>cssh2:nth-last-of-type(odd) {
color: red;
}
Результат: