La pseudo-class :last-of-type de CSS representa el último elemento de su tipo entre un grupo de elementos hermanos.

/* Selecciona cualquier <p> que sea el último elemento
   de su tipo entre sus hermanos */
p:last-of-type {
  color: lime;
}

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

Sintaxis

:last-of-type

Ejemplo

Diseñando el último párrafo

HTML

<h2>Título</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>

CSS

p:last-of-type {
  color: red;
  font-style: italic;
}

Resultado

Elementos anidados

Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el selector universal (*) está implícito cuando no se escribe un selector simple.

HTML

<article>
  <div>Este `div` es primero.</div>
  <div>¡Este <span>'span' anidado es el último</span>!</div>
  <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div>
  <b>¡Este `b` califica!</b>
  <div>¡Este es el 'div' final!</div>
</article>

CSS

article :last-of-type {
  background-color: pink;
}

Resultado

Especificaciones

Especificación Estado Comentarios
Selectors Level 4
La definición de ':last-of-type' en esta especificación.
Working Draft Los elementos coincidentes no requieren tener un padre.
Selectors Level 3
La definición de ':last-of-type' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si3.599.53.2
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico2.1 ? Si4103.2 ?

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, jesanchez, jsalinas
Última actualización por: lajaso,