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 Flexbox lernen mit Flexbox Froggy Flexbox ist eine moderne Möglichkeit responsive und flexible Layouts zu erstellen. Dabei kann komplett auf Größenangaben und Werte wie position, float...
Schnelle Darstellung von Daten mit Recline.js Manchmal sind die Anforderungen eines Kunden ganz einfach: eine CSV-Datei als sortierbare Tabelle online stellen zum Beispiel. Hört sich einfach an, i...
Linkcheck mit CSS3 Bei der HTML-Umsetzung eines Designs werden in der Regel alle Links entweder gar nicht, oder mit einem # versehen. Dies liegt in der Regel daran, das ...
Der ultimative CSS gradient Generator CSS Gradients sind nicht nur ein neuer Hype, sondern eine äußerst sinnvolle Sache, da sie helfen, statische Grafiken loszuwerden und schnell austausch...

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.