: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.

Die :nth-of-type() CSS Pseudo-Klasse wählt Elemente basierend auf ihrer Position unter Geschwistern desselben Typs (Tag-Name) aus.

Probieren Sie es aus

Syntax

Die nth-of-type Pseudo-Klasse wird mit einem einzelnen Argument angegeben, das das Muster für die Auswahl von Elementen darstellt.

Siehe :nth-child für eine detailliertere Erklärung der Syntax.

css
:nth-of-type(<An+B> | even | odd) {
  /* ... */
}

Beispiele

Einfaches Beispiel

HTML

html
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

CSS

css
/* Odd paragraphs */
p:nth-of-type(2n + 1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

Ergebnis

Hinweis: Es gibt keine Möglichkeit, mit diesem Selektor das nth-of-class auszuwählen. Der Selektor berücksichtigt nur den Typ, wenn die Liste der Übereinstimmungen erstellt wird. Sie können jedoch CSS auf ein Element basierend auf dem :nth-of-type Standort und einer Klasse anwenden, wie im obigen Beispiel gezeigt.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch