Cascading Style Sheets – kurz CSS – ist eine Formatierungssprache zur Beschreibung der Darstellung von strukturierten Dokumenten (wie HTML und XML). CSS ist ein so genannter „living standard“ (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. An der neuesten „Version“ Selectors Level 4 wird im Moment gearbeitet.

CSS-Selektoren sind Muster, die mit Elementen in einem Baum übereinstimmen und als solche eine von mehreren Technologien bilden, die zur Auswahl von Knoten in einem Dokument verwendet werden können. Selektoren wurden für die Verwendung mit HTML und XML optimiert. Sie sind eine Kernkomponente von CSS (Cascading Style Sheets), die mit Hilfe von Selektoren Stileigenschaften an Elemente im HTML-Dokument binden.

Besitz nicht eine Klasse oder ID :not

Hin und wieder kommt es vor, dass alle Elemente in CSS angesprochen werden sollen, die nicht eine bestimmte Klasse haben. Dafür gibt es die Pseudoklasse :not, sie negiert die nachfolgende Angabe. Das nachfolgende Beispiel zeigt, wie alle li-Elemente ausgewählt werden, die nicht die Klasse active besitzen.

li:not(.avtive)

Kindelement von hinten gezählt :nth-last-child(n)

Der CSS-Selektor zum Ansprechen eines bestimmten Kindelementes :nth-child(n) ist allgemein bekannt. Soll nun das letzte oder vorletzte Element angesprochen werden, kann entweder die Anzahl der Elemente abgezählt bzw. ermittelt werden, oder mit :nth-last-child(n) einfach von hinten gezählt werden. Das nachfolgende Beispiel zeigt, wie der vorletzte Eintrag einer Liste angesprochen werden kann.

li:nth-child(2)

Das n-te gleichartige Element :nth-of-type(n)

Mit CSS ist es nicht nur möglich, ein bestimmtes Kindelement mit einer numerischen Position auszuwählen, sondern auch das direkte Vorkommen eines Elements mit einer numerischen Position auf der gesamten Seite. Mit dem nachfolgenden Beispiel kann die zweite ul-Liste auf einer Seite direkt angesprochen werden.

ul:nth-of-type(2)

Elemente, die nur ein Kindelement haben :only-child

Hin und wieder möchte man zum Beispiel automatisiert Listen anders darstellen, die nur einen Eintrag aufweisen. Dazu kann die Pseudoklasse :only-child verwendet werden. Mit dem nachfolgenden Beispiel können alle ul-Listen angesprochen werden, die nur ein li-Kindelement haben.

ul > li:only-child

Das Elternelement ansprechen :has

Das Elternelement kann bisher nicht direkt mit CSS angesprochen werden. Im aktuellen Entwurf gibt es aber die Pseudoklasse :has. Daher wird es momentan leider noch nicht von den Web-Browsern unterstützt. Das nachfolgende Beispiel zeigt den Einsatz. Hierbei wird das ul-Element selektiert, welches ein Kindelement mit der Klasse active besitzt.

ul:has(> li.active)

Selektoren in JavaScript

Neben den bekannten Funktionen document.getElementById(), document.getElementsByClassName() und document.getElementsByTagName(), um in JavaScript Elementknoten anzusprechen, existiert die weitere Methode document.querySelector(). Damit können die mächtigen CSS-Selektoren in JavaScript verwendet werden, um Elemente anzusprechen, auch ohne jQuery (http://techblog.novacapta.de/blog/braucht-man-wirklich-jquery/). Das nachfolgende Beispiel zeigt, wie alle li-Elemente ausgewählt werden, die nicht die Klasse active besitzen.

document.querySelector("li:not(.avtive)")

Wenn ihr jetzt mehr über CSS-Selektoren erfahren möchtet, findet ihr hier weitere Blog-Artikel:
+ CSS-Selektoren by kulturbanause Blog
+ Effiziente CSS Selektoren by Web Developer Blog
+ CSS-Selektoren by webDevContainer

Noch ein Tipp zum Schluss: Wie ihr unnötige CSS-Anweisungen aufspürt, könnt ihr hier nachlesen:
+ In 5 Schritten CSS-Dateien aufräumen & eine schnelle Webseite erhalten by SEO Couch