La pseudo-clase :nth-last-of-type() CSS coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.
/* Selecciona cada cuarto elementos <p> entre
cualquier grupo de hermanos, contando hacia
atrás desde el último */
p:nth-last-of-type(4n) {
color: lime;
}
Nota: Esta pseudo-clase es esencialmente la misma que :nth-of-type, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
Sintaxis
La pseudo-clase nth-last-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.
Ver :nth-last-child para una explicación más detallada de su sintaxis.
Sintaxis formal
:nth-last-of-type( <nth> )
Ejemplo
HTML
<div> <span>Este es un span.</span> <span>Este es otro span.</span> <em>Esto esta enfatizado.</em> <span>¡Guauu, este span se pone color lima!</span> <strike>Esto está tachado.</strike> <span>Aquí hay un último span.</span> </div>
CSS
span:nth-last-of-type(2) {
background-color: lime;
}
Resultado
Especificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| Selectors Level 4 La definición de ':nth-last-of-type' en esta especificación. |
Working Draft | Los elementos coincidentes no requieren tener un padre. |
| Selectors Level 3 La definición de ':nth-last-of-type' en esta especificación. |
Recommendation | Definición Inicial. |
Compatibilidad con navegadores
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Soporte básico | 4 | Si | 3.5 | 9 | 9.5 | 3.2 |
| Feature | Android webview | Chrome para Android | Edge mobile | Firefox para Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Soporte básico | 2.1 | ? | Si | 4 | 10 | 3.2 | ? |