: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 ⁨julio de 2015⁩.

Lapseudo-clase:nth-of-type() deCSS 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-clasenth-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;}