W3docs
es
Iniciar sesión

CSS :last-of-type Pseudoclase

La pseudoclase CSS :last-of-type selecciona el último elemento de su tipo entre los hermanos. Lee sobre ella y prueba ejemplos.

La pseudoclase CSS :last-of-type selecciona un elemento que es el último elemento de su tipo entre los hijos de su padre. "Tipo" aquí hace referencia al nombre de etiqueta del elemento — por lo que p:last-of-type coincide con el último <p> dentro de su padre, independientemente de cuántos otros elementos (divs, encabezados, spans) aparezcan después de él.

Esta página explica qué coincide con :last-of-type, su sintaxis, cómo se comporta en diferentes tipos de elementos y — de manera importante — en qué se diferencia de la pseudoclase de aspecto similar :last-child.

La pseudoclase :last-of-type es equivalente a :nth-last-of-type(1) y selecciona exactamente el mismo elemento.

Cuándo usarla

Recurre a :last-of-type cuando quieras aplicar estilos al último elemento de una etiqueta determinada sin depender de su posición exacta. Usos comunes:

  • Eliminar el margen inferior o el borde del último párrafo en una tarjeta.
  • Dar estilo al último elemento de lista, imagen o sección en un contenedor que mezcla tipos de elementos.
  • Apuntar al "último de su tipo" cuando no puedes estar seguro de que también sea el último hijo del padre.

Si en cambio necesitas el elemento que literalmente es el último hijo del padre — sin importar su tipo — usa :last-child. Consulta la comparación más abajo.

Versión

Selectors Level 4

Selectors Level 3

Sintaxis

Sintaxis CSS de :last-of-type

:last-of-type {
  css declarations;
}

Ejemplo del selector :last-of-type:

Ejemplo de código de :last-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Pruébalo tú mismo »

Apuntar a elementos padre

El selector también se puede aplicar a elementos padre.

Información

The * selector is implied when no type selector is specified (e.g., *:last-of-type is equivalent to :last-of-type).

En el ejemplo siguiente, article:last-of-type aplica estilos al último <article> entre sus hermanos. Observa cómo la pseudoclase se evalúa por tipo dentro de cada padre: los elementos <em> se agrupan por separado de los elementos <div> y <b>, por lo que cada etiqueta tiene su propio "último de su tipo".

Ejemplo de apuntar a un elemento padre:

Pseudoclase CSS :last-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article:last-of-type {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <article>
      <div>This "div" is first.</div>
      <div>This <span>nested "span" is last</span>!</div>
      <div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
      <b>This "b" qualifies!</b>
      <div>This is the final "div"!</div>
    </article>
  </body>
</html>
Pruébalo tú mismo »

:last-of-type vs :last-child

Los selectores :last-child y :last-of-type son similares pero responden preguntas diferentes:

  • :last-child coincide con un elemento solo si es el último hijo de su padre — la posición importa, el tipo no.
  • :last-of-type coincide con el último elemento de un tipo dado, incluso si otros elementos aparecen después de él.

Por tanto, p:last-of-type coincide con el último <p> incluso cuando le sigue un <span>, mientras que p:last-child no coincidiría con ese <p> en absoluto (porque el <span> es el último hijo real). En el ejemplo siguiente, la regla se aplica al último párrafo independientemente de los spans, mientras que span:last-child apunta solo al span final — que resulta ser el último hijo del body.

Ejemplo de los selectores CSS :last-of-type y :last-child:

Selectores :last-of-type y :last-child

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eee;
      }
      span {
        display: block;
      }
      span:last-child {
        background: #8ebf42;
        font-style: italic;
        font-weight: bold;
        color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type and :last-child selectors example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </body>
</html>
Pruébalo tú mismo »

Consideraciones importantes

  • :last-of-type tiene alcance por padre: cada elemento padre tiene su propio "último párrafo", "último div", etc.
  • Solo funciona con tipos de elementos. No existe un equivalente basado en clases — .box:last-of-type significa "el último elemento cuyo tipo coincide con el elemento que también tiene la clase box", no "el último elemento con la clase box". Usa :last-child combinado con una clase, o :nth-last-of-type(), para un control más preciso.
  • Si un padre tiene solo un elemento de un tipo dado, ese único elemento es su propio :last-of-type (y :first-of-type).

Selectores relacionados

Práctica

Práctica
¿Qué coincide con la pseudoclase CSS :last-of-type?
¿Qué coincide con la pseudoclase CSS :last-of-type?
Was this page helpful?