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

Dummy HTML Snippets für Entwickler Mal was schnelles für zwischendurch: In letzter Zeit ist irgendwie ein regelrechter Hype um das gute alte Lorem Ipsum entstanden. Es gibt den Standard...
Mozilla Thimble – HTML & CSS lernen Meine persönliche Meinung ist ja, das Mozilla anstatt sich auf den Browser zu konzentrieren, in den diversesten Nebenprojekten aufreibt. Teilweise kom...
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...
ProCSSor – Der CSS Prettifier Sagen wir mal so: Es existieren für verschiedene Sprachen durchaus Standards, wie Quelltext auszusehen hat, aber keiner hält sich dran. Für das Zend F...

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.