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


Bei der Navigation mit der Tastatur arbeiten
In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...


Intention.js – Responsive direkt im HTML def...
Je nach Einsatz von Responsive ist es normal, das man auch Bilder austauschen muss, oder Design-Elemente anpassen. Die Intention dahinter ist stets kl...


Wieso man Javascript nicht im Head lädt (und im Fo...
Ich kann mich noch erinnern als Anfang der 90er Javascript noch ein außerirdisches Mysterium war, und zwei Zeilen Inline-Javascript das höchste der Ge...


CSS Reset vs. Normalize
Die Tage ging ein Aufschrei durch Twitter: die HTML5-Boilerplate hat den CSS-Reset raus geworfen, und durch ein Normalize ersetzt. Ich war relativ ers...

Kommentare

  1. Daniel T.

    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.