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 12Firefox Soporte completo 3.5IE Soporte completo 9Opera 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 ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, lajaso, edkalel
Última actualización por: mdnwebdocs-bot,