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> )

where
<nth> = <an-plus-b> | even | odd

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico4 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: AltheaE, lajaso
Última actualización por: AltheaE,