Startseite » CSS: :nth-child() vs. :nth-type()

Photo from Unsplash - Sai Kiran Anagani

CSS: :nth-child() vs. :nth-type()

Diese Woche hatte ich eine interessante Herausforderung bei der Theme-Entwicklung. Mit dem :nth-child() Selektor kam ich an einer Stelle nicht weiter.

Ausgangspunkt war eine Blog-Übersichtsseite mit zwei Beiträgen nebeneinander. Mit :nth-child() lässt sich da schnell etwas Abstand zwischen den Beiträgen realisieren. Nachdem die Blog-Übersichtsseite fertig war, klickte ich auf eine Kategorie, um mir alle Beiträge dieser Kategorie anzeigen zu lassen. Und zack, alles kaputt! Der :nth-child() Selektor machte den Abstand an die falschen Beitragselemente dran.

Schuld daran war eine zusätzliche Überschrift, die nur auf den Kategorie-Übersichtsseiten erscheint. Diese war im gleichen div wie die Beiträge, also ein gleichwertiges Kindelement für den :nth-child() Selektor.

Nach kurzer Recherche, wie man diese Art Problem lösen könnte, stieß ich auf den ähnlich klingenden Selektor :nth-of-type(). Jackpot! Dieser funktioniert genauso wie :nth-child(), bietet aber die Möglichkeit, Elemente exakter auszuwählen. Mit article:nth-of-type() wurde die Überschrift auf der Kategorie-Übersichtsseite ignoriert und die Abstände nur an den Beiträgen angezeigt.

Fazit: Man lernt wirklich nie aus, auch wenn man meint, dass man etwas schon echt gut kann. 🙂

Mehr Infos zu :nth-of-type():

Schreibe einen Kommentar

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