:nth-of-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* 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

Error: could not find syntax for this item

Ejemplos

Ejemplo básico

HTML

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

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

Specification
Selectors Level 4
# nth-of-type-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también