Tobias Scheible
Web-Entwickler, Ingenieur & Dozent
Besser Programmieren mit CSS-Selektoren

Datum: Sonntag, 03. Dezember 2017

Autor: Tobias Scheible

Kommentar(e): 0 Kommentare

Kategorie: Web Development

Tags: JavaScript, CSS

Besserer CSS-Code mit wirkungsvollen Selektoren

Mit CSS-Selektoren können einzelne Elemente oder eine Gruppe von HTML-Elementen angesprochen werden. Neben den üblichen Selektoren – wie z.B. Tag-Name, Klasse oder ID – existieren noch weitere effiziente Selektoren. Wer nativ JavaScript programmiert, kann diese Selektoren auch einsetzen, um effektiv Elemente anzusprechen. In diesem Artikel stelle ich fünf eher unbekannte, aber mächtige CSS-Selektoren vor.

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

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben