:nth-of-type

Der :nth-of-type Selektor ermöglicht es Ihnen, ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge nach einer Formel auszuwählen. Er ist in der CSS Selectors Level 3 Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er verwendet wird, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterelementen zu gestalten.

Angenommen, wir haben eine unsortierte Liste und möchten abwechselnde Listenelemente „Zebra-streifen“.

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

Anstatt jedem Listenelement Klassen hinzuzufügen (z. B. .even & .odd), können wir :nth-of-type verwenden.

li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}

Wie Sie sehen können, akzeptiert :nth-of-type ein Argument: Dies kann eine einzelne Ganzzahl, die Schlüsselwörter „even“ (gerade) oder „odd“ (ungerade) oder eine Formel wie oben gezeigt sein. Wenn eine Ganzzahl angegeben ist, wird nur ein Element ausgewählt – aber die Schlüsselwörter oder eine Formel durchlaufen alle Kinder des übergeordneten Elements und wählen übereinstimmende Elemente aus – ähnlich wie beim Navigieren durch Elemente in einem Array in JavaScript. Die Schlüsselwörter „even“ und „odd“ sind einfach, aber die Formel wird mit der Syntax an+b konstruiert, wobei

• „a“ ein ganzzahliger Wert ist
• „n“ der buchstäbliche Buchstabe „n“ ist
• „+“ ein Operator ist und entweder „+“ oder „-“ sein kann
• „b“ eine ganze Zahl ist und erforderlich ist, wenn ein Operator in der Formel enthalten ist

Es ist wichtig zu beachten, dass diese Formel eine Gleichung ist und jedes Geschwisterelement durchläuft, um zu bestimmen, welches ausgewählt wird. Der Teil „n“ der Formel, falls enthalten, repräsentiert eine Menge von aufsteigenden positiven ganzen Zahlen (genau wie beim Durchlaufen eines Arrays). In unserem obigen Beispiel haben wir jedes zweite Element mit der Formel 2n ausgewählt, was funktionierte, weil jedes Mal, wenn ein Element überprüft wurde, „n“ um eins erhöht wurde (2×0, 2×1, 2×2, 2×3 usw.). Wenn die Reihenfolge eines Elements mit dem Ergebnis der Gleichung übereinstimmt, wird es ausgewählt (2, 4, 6 usw.). Eine detailliertere Erklärung der beteiligten Mathematik finden Sie in diesem Artikel.

Um dies weiter zu veranschaulichen, hier sind einige Beispiele für gültige :nth-of-type Selektoren.

Glücklicherweise müssen Sie die Berechnungen nicht immer selbst durchführen – es gibt mehrere :nth-of-type Tester und Generatoren.

• CSS-Tricks Tester
• Leas Verou Tester

Interessante Punkte

• :nth-of-type durchläuft Elemente beginnend von oben in der Quellreihenfolge. Der einzige Unterschied zwischen ihm und :nth-last-of-type besteht darin, dass letzteres Elemente beginnend von unten in der Quellreihenfolge durchläuft.
• Der :nth-of-type Selektor ähnelt stark :nth-child, aber mit einem entscheidenden Unterschied: er ist spezifischer. In unserem obigen Beispiel würden sie dasselbe Ergebnis liefern, da wir nur li Elemente durchlaufen. Wenn wir jedoch eine komplexere Gruppe von Geschwistern durchlaufen würden, würde :nth-child versuchen, alle Geschwister abzugleichen, nicht nur Geschwister desselben Elementtyps. Dies offenbart die Leistungsfähigkeit von :nth-of-type – es zielt auf einen bestimmten Elementtyp in einer Anordnung ab, in Bezug auf ähnliche Geschwister, nicht alle Geschwister.

Verwandte Eigenschaften

• nth-last-of-type
• nth-child
• nth-last-child
• first-of-type
• last-of-type

Weitere Ressourcen

• Mozilla Docs
• Artikel von QuirksMode
• Artikel von Sitepoint

Browser-Unterstützung

Daten zur Unterstützung des mdn-css__selectors__nth-of-type Features in den wichtigsten Browsern.

:nth-of-type wurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Browserversionen es nicht unterstützen. Die Unterstützung moderner Browser ist jedoch einwandfrei, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen eingesetzt. Wenn Sie ältere Browser unterstützen müssen, verwenden Sie entweder ein Polyfill für IE oder verwenden Sie diese Selektoren auf nicht-kritische Weise nach dem Prinzip der progressiven Verbesserung, was empfohlen wird.