Um CSS Selektoren zu verstehen muss man das Document Object Betrachten: die Darstellung des HTML-Dokuments als Baum:
Bei der Beschreibung des Baumes verwendet man folgende Fachbegriffe:
Der Selektor * wählt alle Elemente des Baums aus:
Über den Namen des HTML-Tags wählt man alle Elemente dieses Typs aus,
zum Beispiel wählt li alle Listen-Elemente aus:
li { color: red; }
Mehrere Selektoren können mit Kommas zu einer Liste gruppiert werden.
Das Komma entspricht einem “Oder”: selektiert werden Tags die entweder h1 sind,
oder h2, oder a:
h1,h2,a { color: red; }
(Achtung Falle: für Links mit dem a Tag gelten noch zusätzliche Regeln,
siehe weiter Unten.)
Hier werden zwei Selektoren mit einem Leerzeichen dazwischen geschrieben.
Im Beispiel unten werden alle a Tags ausgewählt, die Nachkomme
eines div sind:
Achtung: div wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!
div a { color: red; }
(Neu in 2023)
Auch hier wird ein Element ausgewählt, das Nachkomme eines anderen Elements ist.
Achtung: div wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!
div {
& a {
color: red;
}
}
Praktisch: man kann die Deklarationen für div auch mit
rein schreiben:
div {
border: 1px gray solid;
padding: 10px;
& a {
color: red;
}
}
Und man kann das kaufmännische Und weglassen:
div {
border: 1px gray solid;
padding: 10px;
a {
color: red;
}
}
/
#