CSS Selectors: Diese Selektoren sollten Sie unbedingt kennen

Die Gestaltung einer Website hat großen Einfluss auf deren Erfolg. Um Kunden und Kundinnen zu begeistern und langfristig an sich zu binden, sollten Sie daher ein ansprechendes Webdesign wählen. Ein CSS Selector (auf Deutsch auch: CSS-Selektor) hilft Ihnen dabei, genau die Elemente in einer Zeile zu finden, die Sie anpassen und gestalten möchten. Es ist hilfreich, die verschiedenen Selektoren zu kennen, um gezielt mit ihnen umgehen zu können.

Was ist ein CSS-Selektor?

CSS (Cascading Style Sheets = mehrstufige Formatvorlagen) ist eine Gestaltungs- und Formatierungssprache. Sie hilft bei der Gestaltung von Webinhalten, da sie eine klare Trennung von Inhalt und Form ermöglicht.

Mithilfe von CSS-Selektoren gestalten Sie Ihren Webauftritt nicht nur attraktiv, sondern können ihn jederzeit leicht anpassen und neu strukturieren. Ein CSS-Selektor beschreibt bestimmte Regeln und Bedingungen, unter denen eine Gestaltung von Elementen oder Zeilen vorgenommen wird.

Welche CSS-Selektoren gibt es?

Nicht immer ist es gewünscht, dass ausgewählte CSS-Regeln auf alle Elemente angewendet werden. In diesem Fall kommt ein CSS-Selektor zum Einsatz. Er definiert eindeutig, für welche Elemente und Zeilen die jeweilige Regel gelten soll.

Gängige CSS-Selektoren wie Universallektoren, Typselektoren, Klassenselektoren, ID-Selektoren & Co. helfen Ihnen dabei. Hierbei sollten Sie allerdings auf eine möglichst umfassende Browser-Kompatibilität achten. Lesen Sie hier mehr zu den bekanntesten CSS-Selektoren.

Universalselektoren

Ein solcher CSS-Selektor wählt nicht eine bestimmte Art von Element aus, sondern alle Knoten. Auf diese Weise lassen sich Änderungen vornehmen, die an vielen Stellen parallel erfolgen sollen. Die Syntax dieses CSS-Selektors ist: * ns|* *|*.

Typselektoren (CSS type selector)

Dieser CSS-Selektor kommt immer dann zum Einsatz, wenn alle Elemente eines bestimmten Typs verändert werden sollen. Die Syntax dieses CSS-Selektors ist: eltname. Ein typisches Beispiel wäre input, wodurch jedes <input>Element verändert wird.

Klassenselektoren (CSS class selector)

Mit einem solchen CSS-Selektor werden alle Elemente einer Klasse anhand des Class-Attributs beziehungsweise Klassennamens ausgewählt. Die Syntax dieses CSS-Selektors ist: .classname. Ein typisches Beispiel ist .index, mit dem alle Elemente der Index-Klasse ausgewählt werden.

ID-Selektoren (CSS ID selector)

Mit diesem CSS-Selektor werden Knoten danach ausgewählt, ob sie ein ID-Attribut besitzen. Die Syntax dieses CSS-Selektors ist: #idname. Ein typisches Beispiel ist #toc, um alle Elemente mit der ID toc auszuwählen.

Attributselektoren (CSS attribute selector)

Die Bestimmung einzelner Knoten erfolgt bei diesem CSS-Selektor anhand eines Wertes, den dieser besitzt. Es gibt verschiedene Möglichkeiten, Attributselektoren aufzuschreiben: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] . Ein typisches Beispiel wäre [autoplay], um alle Elemente mit einem Autoplay-Attribut auszuwählen.

Pseudoklassen

Bei der Pseudoklasse werden sogenannte Pseudoelemente anhand von Informationen ausgewählt, die sich nicht im Dokumentenbaum befinden. Auf diese Weise können durch Pseudoklassen CSS-Regeln auf bestimmte Elemente angewendet werden, die nur schwer zu definieren sind.

Ein Beispiel für die Pseudoklasse und damit verbundene Pseudoelemente wäre die Auswahl von Links, die mindestens einmal von einem Nutzer oder einer Nutzerin besucht wurden.

Pseudoelement

Durch Pseudoelemente werden Elemente, die HTML nicht ausspielen können, wiedergegeben. Pseudoelemente ersetzen eben jene nicht vorhandenen Elemente und machen es Ihnen so möglich, CSS-Regeln aufzustellen.

Pseudoelemente funktionieren im Grunde ähnlich wie die Pseudoklassen, nur dass einzelne Elemente und keine Klassen mittels Abstraktionen ausgewählt werden.

CSS-Kombinatoren

CSS-Selektoren agieren häufig nicht allein, sondern werden miteinander kombiniert oder verschachtelt. Die entsprechenden Kombinatoren wählen die einzelnen Elemente anhand der jeweiligen Verschachtelung aus. Einige typische Anwendungsbeispiele zu den Kombinatoren finden Sie im Folgenden:

Nachfahrselektor

Ein solcher Kombinator wählt Knoten aus, bei denen es sich um Kinder des Elements handelt, das davor angegeben wird. Es muss sich hierbei nicht zwingend um direkte Kinder handeln. Die Syntax dieses CSS-Selektors ist: A B. Ein typisches Beispiel wäre div span, bei dem alle <span>-Elemente ausgewählt werden, die Teil eines <div>-Elements sind.

Kindselektor

Dieser Kombinator arbeitet ähnlich wie ein Nachfahrselektor, allerdings handelt es sich bei den ausgewählten Elementen immer um direkte Kindelemente des davorstehenden Elements. Die Syntax dieses CSS-Selektors ist: A > B.

Ein typisches Beispiel für einen Kindselektor ist ul > li, bei dem alle <li>-Elemente ausgewählt werden, die Teil eines <ul>-Elements sind. Mittels nth-Selektoren ist es nicht mehr nötig, spezielle Klassen für unterschiedliche Elemente zu erzeugen. Stattdessen ermöglicht Ihnen nth, Kindselektoren übergeordneter Klassen gezielt anzusprechen.

Ein Beispiel wäre die Liste „li”, die mittels li:nth-child(x) angesprochen werden kann. Über li:nth-child(3) kann beispielsweise das dritte Listenelement angesprochen werden.

Geschwisterselektor

Dieser CSS-Kombinator ist mit einem Kindselektor vergleichbar. Er wählt alle Elemente aus, die unmittelbar auf das davor genannte Element folgen. Die Syntax dieses Kombinators ist: A + B. Ein typisches Beispiel wäre h2 + p, bei dem genau das <p>-Element ausgewählt wird, das auf ein <h2>-Element folgt.

Indirekter Geschwisterselektor

Indirekte Geschwisterselektoren verhalten sich zu Geschwisterselektoren wie Nachfahrselektoren zu Kindselektoren. Die ausgewählten Knoten teilen sich mit dem vorangestellten Element ein Elternelement, müssen diesem aber nicht unmittelbar folgen.

Die Syntax dieses Kombinators ist: A ~ B. Ein typisches Beispiel wäre p ~ span, bei dem alle <span>-Elemente ausgewählt werden, die innerhalb desselben Elements auf ein <p>-Element folgen.

Kombinierte Kombinationsselektoren

Einfache Selektoren können miteinander kombiniert werden. Dann ist es wiederum möglich, solche Kombinationen erneut miteinander zu kombinieren. Aufgeschrieben sähe das in etwa so aus: #bezeichnung .nav > p + pre ~ [title] { color: red; }.

Bei diesem Beispiel würden die title-Elemente ausgewählt, die auf derselben Ebene auf ein pre-Element folgen, wobei der pre-Tag einem p-Tag folgen muss. Der p-Tag muss ein direktes Kindelement eines Elements sein, dem die nav-Klasse zugewiesen wurde. Das Element selbst muss die ID-Bezeichnung zugewiesen bekommen haben.

Fazit: Darum lohnt sich der Einsatz von CSS-Selektoren

Grundsätzlich ist es möglich, willkürlich Änderungen an einer Website vorzunehmen. Auf diese Weise entsteht ein statischer Internetauftritt, der funktional und ansprechend sein kann.

Allerdings ist es bei einer Häufung ganz unterschiedlicher Gestaltungselemente später nicht mehr oder nur unter großem Aufwand möglich, einheitliche Änderungen an einem Dokument vorzunehmen. Außerdem ist bei diesem Vorgehen nicht immer für eine optimale Browser-Kompatibilität gesorgt. Hier kommt CSS ins Spiel.

Durch CSS-Selektoren wie etwa Nachfahrselektoren, nth oder Pseudoelemente findet eine klare Trennung zwischen Inhalt und Gestaltung statt. Somit ist es Ihnen möglich, Änderungen gezielt an bestimmten Elementen wie etwa einem Listenelement vorzunehmen.

Mittels alignfull und alignwide können Sie beispielsweise die Länge und Breite eines Elements in einer Zeile bestimmen, wohingegen figcaption für Bilder genutzt wird. CSS-Selektoren reduzieren Ihre Arbeit bei der Gestaltung damit erheblich, weswegen sich der Einsatz der mehrstufigen Formatvorlagen langfristig garantiert auszahlt.

Titelbild: MoMo Productions / iStock / Getty Images Plus