Der Unterschied zwischen :nth-child und :nth-of-type

Ich hab hier mal wieder ein CSS eines Kollegen zwischen das von dem Bemühen zeugt, innovative Lösungen zu nicht existierenden Problemen zu finden (ist das jetzt nicht nett verklausuliert, ich hätte auch schreiben können, dass man die Finger von diversen Sachen lassen sollte, wenn man keine Ahnung davon hat). Auf jeden Fall bin ich in diesem Zusammenhang ein klein wenig in Erklärungsnot bzgl. :nth-child und :nth-of-type gekommen. Die Kernaussage war die, das die beiden das Gleiche tun, was natürlich großer Quatsch ist!

Schauen wir uns mal diesen Konstrukt an:

<div>
    <p>Ernie</p>
    <p>Bert</p>
</div>

Die beiden Deklarationen p:nth-child(2) und p:nth-of-type(2) würden in diesem Beispiel auf den gleichen Container verweisen, nämlich Bert. Der Unterschied zwischen den beiden wird aber schnell klar, wenn man sich vor Augen hält, WAS sie eigentlich umgangssprachlich bedeuten würden:

p:nth-child(2)

  • ist ein Paragraph
  • es das zweite Child-Element eines Parent-Elementes

p:nth-of-type(2)

  • Wählt den zweiten Paragraph des Parent-Elementes

Noch genauer: das zweite Child eines Paragraphen ist nicht zwingend ein Paragraph! Um es noch beispielhafter zu machen, machen wir das feine CSS kaputt:

<div>
    <h1>Sesamstrasse</h1>
    <p>Ernie</p>
    <p>Bert</p>
</div>

p:nth-child(2) liefert Ernie, weil es der zweite Container im Parent-Element ist. p:nth-of-type(2) liefert weiterhin Bert, da es der zweite Paragraph (und nicht der zweite Container) ist!

Man kann das noch auf die Spitze treiben in dem man hinter dem <h1> ein <h2> einfügt, für den Fall liefert :nth-child schlicht und ergreifend gar nichts, da es zwar mindestens zwei Child-Elemente gibt, aber weder das erste noch das zweite eine Paragraph ist.

Achtung bei den Selektoren, die Unterstützung in den Browsern ist noch recht dürftig, aber wenn man die dann einsetzt, bitte daran denken wie die beiden Elemente auswählen! Mehr Infos bzgl. Pseudo-Selektoren gibt es hier.

Ähnliche Beiträge

CSS Grundgerüst automatisch erstellen lassen Der erste Wurf eines Templates ist recht nervig. Ich weiss nicht wie ihr vorgeht, aber ich beginne erst einmal damit die komplette Struktur in HTML au...
Schnellere Webentwicklung mit MarkerCSS? Mit all den notwendigen Browser-Workarounds, und der generellen Schreibwütigkeit, die man zur Erstellung von CSS aufbieten muss, gehen derzeit viele B...
Autocomplete bei Input-Feldern abschalten Das am meisten ignorierte Attribut im Web-Umfeld lautet wohl autocomplete.  Dabei ist der kleine Helfer äußerst sinnvoll, suggeriert es doch dem DAU, ...
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...

Eine Antwort auf „Der Unterschied zwischen :nth-child und :nth-of-type“

  1. Danke für die Info, hab diese beiden Elemente schon einige Male genutzt aber nur mit Try’n’Error auf die richtige Lösung gekommen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.