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():
Eine Antwort auf „CSS: :nth-child() vs. :nth-type()“
Guter Hinweis, danke!