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...
CSS Crush – noch ein CSS Preprocessor aus De... Ich für meinen Teil bin inzwischen starker Verfechter für den Einsatz von Turbine. Der CSS Preprocessor von Peter Kröner vereinfacht mein Leben nachha...
Backgrounds für Grid Based Layouts Okay, ich gebe zu, der Titel ist maximal mystisch, passt aber ;) Ich glaube zum Grid Based Design brauche ich nichts mehr zu sagen, und es gibt ja auc...
Sprite Cow – CSS Sprite nach CSS CSS Sprites sind höchst nützliche kleine Dinger, um Ladezeiten zu verkürzen, vor allem wenn man ein passendes Caching / Expire im Apache damit verbind...

Ein Kommentar

  • 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