W3docs
de
Anmelden

CSS :nth-of-type() Pseudo-Klasse

Die CSS-Pseudo-Klasse :nth-of-type() wählt Elemente desselben Typs aus. Erfahre mehr und übe mit Beispielen.

Die Pseudo-Klasse :nth-of-type() trifft Elemente anhand ihrer Position unter Geschwisterelementen desselben Typs (desselben Tag-Namens). Die Zählung beginnt bei 1, sodass p:nth-of-type(1) das erste <p> in einem Elternelement ist, das zweite <p> hat den Wert 2, und so weiter.

Das Argument in den Klammern kann eine einzelne Zahl, das Schlüsselwort odd oder even oder eine Formel der Form an + b sein. Damit lässt sich flexibel festlegen, welche Elemente gestylt werden – z. B. „jedes dritte Element", „alle geraden Zeilen" oder „alles ab dem ersten" – ohne zusätzliche Klassen im HTML zu benötigen.

:nth-of-type() vs. :nth-child()

Dies ist der Unterschied, über den die meisten stolpern, daher lohnt es sich, ihn genau zu betrachten.

  • :nth-child() zählt alle Geschwisterelemente und prüft dann, ob das gefundene Element vom gewünschten Typ ist.
  • :nth-of-type() zählt nur Geschwister desselben Typs und ignoriert alles andere.

Betrachte folgendes Markup:

<div>
  <h2>Heading</h2>
  <p>Paragraph A</p>
  <p>Paragraph B</p>
</div>
  • p:nth-child(2) wählt Paragraph A aus – es ist das 2. Kind insgesamt und ein <p>.
  • p:nth-of-type(2) wählt Paragraph B aus – es ist das 2. <p>, unabhängig vom <h2> davor.

Verwende :nth-of-type(), wenn das Elternelement verschiedene Elementtypen enthält und du nur einen davon zählen möchtest.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :nth-of-type() Syntax

:nth-of-type(number | odd | even | an+b) {
  css declarations;
}

Das Argument akzeptiert:

  • Eine Zahl — :nth-of-type(3) trifft das 3. Element dieses Typs.
  • odd / even — praktische Schlüsselwörter für abwechselnde Elemente (odd = 1, 3, 5…; even = 2, 4, 6…).
  • Eine Formel an + b — zum Beispiel trifft :nth-of-type(3n) jedes 3. Element, und :nth-of-type(2n+1) entspricht odd. Dabei beginnt n bei 0 und zählt aufwärts, a ist die Schrittweite und b ist der Versatz.

Beispiel des :nth-of-type()-Selektors:

CSS :nth-of-type() Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Probier es selbst »

Beispiel von :nth-of-type mit "odd" und "even":

CSS :nth-of-type() weiteres Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(odd) {
        background: #1c87c9;
      }
      p:nth-of-type(even) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
    <p>Paragraph 9</p>
    <p>Paragraph 10</p>
  </body>
</html>
Probier es selbst »

Verwendung einer an+b-Formel

Eine Formel ermöglicht es, ein sich wiederholendes Muster anzusprechen. Das folgende Beispiel hebt jeden 3. Absatz (3n) und separat jeden Absatz ab dem 4. (n+4) hervor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3n) {
        background: #8ebf42;
      }
      p:nth-of-type(n + 4) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() formula example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

Mit 3n erhalten die Absätze 3 und 6 den grünen Hintergrund. Mit n + 4 sind die Absätze 4, 5 und 6 fett (jeder Absatz ab dem 4.).

Wissenswertes

  • Die Zählung beginnt bei 1, nicht bei 0. :nth-of-type(1) ist der erste Treffer und verhält sich wie :first-of-type.
  • „Typ" bedeutet der Tag-Name, keine Klasse. :nth-of-type() kann keine .item-Elemente speziell zählen – es zählt alle Elemente mit diesem Tag unter den Geschwistern. Wenn du .item:nth-of-type(2) schreibst, trifft es ein Element, das sowohl das 2. seines Typs als auch mit der Klasse item versehen ist.
  • Um vom Ende der Liste statt vom Anfang zu zählen, verwende :nth-last-of-type().

Verwandte Seiten

Übung

Übung
Was trifft der CSS-Selektor :nth-of-type() an?
Was trifft der CSS-Selektor :nth-of-type() an?
Was this page helpful?