:nth-of-type

La pseudo-class CSS :nth-of-type() coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans.

/* Selecciona cada quart element <p> entre qualsevol grup de germans */
p:nth-of-type(4n) {
  color: lime;
}

Sintaxi

La pseudo-class nth-of-type s'especifica amb un sol argument, que representa el patró per als elements coincidents.

Veure :nth-child per obtenir una explicació més detallada de la seva sintaxi.

Sintaxi formal

:nth-of-type( <nth> )
where 
<nth> = <an-plus-b> | even | odd

Exemples

Exemple bàsic

HTML

<div>
  <div>This element isn't counted.</div>
  <p>First paragraph. (left aligned)</p>
  <p>Second paragraph. (right aligned)</p>
  <div>This element isn't counted.</div>
  <p>Third paragraph. (left aligned)</p>
</div>

CSS

/* Align odd paragraphs to the left */
p:nth-of-type(2n+1) {
  text-align: left;
}

/* Align even paragraphs to the right */
p:nth-of-type(2n) {
  text-align: right;
}

Resultat

Especificacions

Navegadors compatibles

Vegeu també

• :nth-child, :nth-last-of-type