Verschiedene Optionen

Selector Combinations

Es gibt verschiedene Optionen, wie man Selektoren miteinander kombiniert, respektive unter welchen Umständen ein Rule-Set zum Einsatz kommt.

Die Möglichkeiten, wie CSS Selektoren kombiniert werden können, sind sehr breit. Wer mit CSS arbeitet, der tut sich gut, gewisse Kombinationen zu kennen. Beispielsweise kann man auch :not Selektoren nutzen, um gewisse Kombinationen auszuschliessen.

Im Bild werden vier Möglichkeiten gezeigt. Es sind alles Beispiele, die auch anders kombiniert werden können.

Nested Selector

Mit einem Leerschlag, werden Selektoren verschachtelt miteinander kombiniert. Beispielsweise: Wähle alle ::hover (State) innerhalb .titel-500 (Class) innerhalb einer h2 (HTML-Element) aus.

Packet Selector

Mit einem Komma trennt man verschiedenen Selektoren voneinander ab, die aber alle das gleiche Rule-Set erhalten sollen.

Child Selector

Mit einem Bracket > (rechte eckige Klammer) wird ein Rule-Set nur für Child-Elemente eines definierten Parents definiert.

Sibling Selector

Mit einem Plus-Zeichen + werden Elemente angesprochen, die auf gleicher Stufe stehen. Siblings = Geschwister.

© Webdesign Essentials

Links

W3 Schools - Selector Combinations

W3 Schools - Nesting and Grouping

Tutsplus - 30 CSS Selectors

Vertiefe dich ins ganze Kapitel

HTML & CSS Einführung für Designer:innen