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 AndroidiOS SafariSamsung Internet
Soporte básicoChrome 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: lajaso, edkalel
Última actualización por: lajaso,