W3docs
es
Iniciar sesión

CSS :nth-last-of-type() Pseudoclase

La pseudoclase CSS :nth-last-of-type() selecciona elementos desde el último hacia atrás. Lee sobre la pseudoclase y prueba ejemplos.

La pseudoclase CSS :nth-last-of-type() coincide con elementos de un tipo determinado, contando desde el último elemento de ese tipo entre sus hermanos. Es la imagen especular de :nth-of-type(), que cuenta desde el primero.

Esto resulta útil cuando el número de elementos es desconocido o cambia dinámicamente y necesitas aplicar estilos a elementos relativos al final de una lista — por ejemplo, resaltar las últimas filas de una tabla o los últimos elementos de un menú de navegación, independientemente de cuántos haya antes.

Sintaxis

La pseudoclase acepta un único argumento dentro del paréntesis: un número, una palabra clave o una fórmula.

:nth-last-of-type( <nth> ) {
  /* style declarations */
}
ValorDescripción
numberCoincide exactamente con el enésimo elemento de su tipo, contando desde el final (1 = el último).
odd / evenCoincide con elementos en posiciones impares o pares contadas desde el final.
an + bCoincide con cada a-ésimo elemento a partir del desplazamiento b, contando desde el final. a y b son enteros y n toma los valores 0, 1, 2, ….

Cómo funciona la fórmula an + b

El navegador sustituye n = 0, 1, 2, … en la fórmula y conserva cada posición que produce. El conteo siempre comienza en el último elemento del tipo correspondiente:

  • 2n (igual que even) → posiciones 2, 4, 6, … desde el final.
  • 2n + 1 (igual que odd) → posiciones 1, 3, 5, … desde el final.
  • 3n + 1 → posiciones 1, 4, 7, … desde el final.
  • -n + 3 → los últimos tres elementos (posiciones 3, 2, 1 desde el final).

Diferencias con selectores relacionados

  • :nth-of-type() cuenta los mismos elementos coincidentes pero comienza desde el principio en lugar del final.
  • :nth-last-child() también cuenta desde el final, pero considera todos los elementos hermanos, no solo los del mismo tipo. :nth-last-of-type() ignora los hermanos de otros tipos al contar. Ambos tienen la misma especificidad.

Consulta también :last-of-type, que equivale a :nth-last-of-type(1).

Ejemplos

Seleccionar una posición exacta desde el final

Aquí :nth-last-of-type(3) selecciona el tercer párrafo contado desde el final — es decir, "Paragraph 4" en una lista de seis.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-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>
  </body>
</html>
Pruébalo tú mismo »

Uso de las palabras clave odd y even

Contando desde el final, odd coincide con el 1.º, 3.º, 5.º, … párrafos (es decir, "Paragraph 6", "Paragraph 4", "Paragraph 2"), y even coincide con el 2.º, 4.º, 6.º, … ("Paragraph 5", "Paragraph 3", "Paragraph 1"). Juntos aplican estilos a todos los párrafos en dos colores alternos.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-last-of-type(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-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>
  </body>
</html>
Pruébalo tú mismo »

Uso de una fórmula (an + b)

Con nueve párrafos, 3n + 1 coincide con cada tercer párrafo contando desde el final — posiciones 1, 4 y 7 desde el final, es decir, los párrafos 9.º, 6.º y 3.º en el orden del documento.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3n+1) {
        background: #767fea;
        padding: 10px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eighth paragraph.</p>
    <p>The ninth paragraph.</p>
  </body>
</html>
Pruébalo tú mismo »

Seleccionar los últimos N elementos

Un coeficiente negativo es la forma idiomática de apuntar a los últimos elementos. -n + 3 coincide con los últimos tres párrafos independientemente del total:

p:nth-last-of-type(-n + 3) {
  font-weight: bold;
}

Compatibilidad con navegadores y especificación

:nth-last-of-type() es compatible con todos los navegadores modernos. Está definido en:

Práctica

Práctica
¿Cuál es la función de la pseudoclase CSS :nth-last-of-type?
¿Cuál es la función de la pseudoclase CSS :nth-last-of-type?
Was this page helpful?