Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The :nth-of-type() CSS pseudo-class matches one or more elements of a given type, based on their position among a group of siblings.

There is no `:nth-of-type(0)`!

/* Selects every fourth <p> element
   among any group of siblings */
p:nth-of-type(4n) {
  color: lime;
}

Syntax

The nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.

See :nth-child for a more detailed explanation of its syntax.

Formal syntax

:nth-of-type( <nth> )

where
<nth> = <an-plus-b> | even | odd

Examples

Basic example

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;
}

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':nth-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':nth-of-type' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 9.5 3.1

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Zuletzt aktualisiert von: xgqfrms-GitHub,