Pseudoclase nth-last-child
La pseudoclase nth-last-child selecciona
un elemento que es el enésimo hijo
de su padre, contando desde el final. Se comporta
de manera similar a nth-child,
solo que el conteo se realiza desde el final.
Sintaxis
selector:nth-last-child(número | odd | even | expresión) {
}
Valores
| Valor | Descripción |
|---|---|
| número |
Un número positivo empezando por 1.
Especifica el número del elemento al que queremos
aplicar el estilo. La numeración de los elementos empieza en 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 infinito. Así, 2n significa todos los números pares
(empezando por el segundo).
¿Cómo entenderlo? Sustituimos en n secuencialmente
números desde 0 en adelante: 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 - será
cada tercer elemento (empezando por el tercero), y así sucesivamente.
|
Ejemplo
En este ejemplo, haremos de color rojo
aquel li que es el 4to desde el final
entre los hijos de su padre:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-last-child(4) {
color: red;
}
:
Ejemplo
Ahora haremos rojos todos
los li pares contando desde el final:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-last-child(even) {
color: red;
}
:
Ejemplo
Ahora haremos rojos todos los li impares contando
desde el final:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-last-child(odd) {
color: red;
}
:
Ejemplo
Ahora haremos rojo cada tercer
li contando desde el final:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-last-child(3n) {
color: red;
}
:
