:nth-of-type

La pseudo-clase :nth-of-type() de CSS selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.

/* Selecciona cada cuarto elementos <p> entre 
   cualquier grupo de hermanos */
p:nth-of-type(4n) {
  color: lime;
}

Sintaxis

La pseudo-clase nth-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.

Ver :nth-child para una explicación más detallada de su sintaxis.

Sintaxis formal

:nth-of-type( <nth> )

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

Ejemplos

Ejemplo básico

HTML

<div>
  <div>Este elemento no se cuenta.</div>
  <p>1er párrafo.</p>
  <p>2do párrafo.</p>
  <div>Este elemento no se cuenta.</div>
  <p>3er párrafo.</p>
  <p>4to párrafo.</p>
</div>

CSS

/* Párrafos impares */
p:nth-of-type(2n+1) {
  color: red;
}

/* Párrafos pares */
p:nth-of-type(2n) {
  color: blue;
}

/* Primer párrafo */
p:nth-of-type(1) {
  font-weight: bold;
}

Resultado

Especificaciones

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

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:nth-of-type()Chrome Soporte completo 1Edge Soporte completo 12
Notas
Soporte completo 12
Notas
Notas Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Firefox Soporte completo 3.5IE Soporte completo 9
Notas
Soporte completo 9
Notas
Notas Internet Explorer treats all unknown elements (such as custom elements) as the same element type.
Opera Soporte completo 9.5Safari Soporte completo 3.1WebView Android Soporte completo 2Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.1Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo
Ver notas de implementación.
Ver notas de implementación.

Ver también