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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:nth-of-type()Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 3.1WebView Android Soporte completo 2Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 9.5Safari iOS Soporte completo 3.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

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