:last-of-type
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La pseudo-class :last-of-type de CSS representa el último elemento de su tipo entre un grupo de elementos hermanos.
css
/* 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
Error: could not find syntax for this item
Ejemplo
Diseñando el último párrafo
HTML
html
<h2>Título</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
CSS
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
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
css
article :last-of-type {
background-color: pink;
}
Resultado
Especificaciones
| Specification |
|---|
| Selectors Level 4 # last-of-type-pseudo |
Compatibilidad con navegadores
BCD tables only load in the browser