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

cssselector: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:

html<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>

cssli:nth-last-child(4) {
  color: red;
}

Результат:

Ejemplo

Ahora haremos rojos todos los li pares contando desde el final:

html<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>

cssli:nth-last-child(even) {
  color: red;
}

Результат:

Ejemplo

Ahora haremos rojos todos los li impares contando desde el final:

html<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>

cssli:nth-last-child(odd) {
  color: red;
}

Результат:

Ejemplo

Ahora haremos rojo cada tercer li contando desde el final:

html<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>

cssli:nth-last-child(3n) {
  color: red;
}

Результат: