Child Selector
Wir kennen schon den Descendant Selector, der beliebige Nachfahren auswählt. Der Child Selector ist auf direkte Kinder beschränkt.
li > a { color: yellow; }
Wir kennen schon den Descendant Selector, der beliebige Nachfahren auswählt. Der Child Selector ist auf direkte Kinder beschränkt.
li > a { color: yellow; }
Wir haben im Zusammenhang mit Links schon die Pseudo Classes :link und
:visited kennen gelernt, und im Zusammenhang mit Interaktion :hover und
:focus.
Es gibt noch eine Hand voll weiterer Pseudo Classes:
:first-child selektiert ein Element nur, wenn es das erste Kind seiner Eltern-Node ist:first-letter selektiert nur den ersten Buchstaben! Das funktioniert auch,
wenn der Buchstabe gar keine eigenen Node in der DOM ist!:first-word selektiert das erste Wort. Das funktioniert auch,
wenn das Wort gar keine eigenen Node in der DOM ist!::selection der aktuell ausgewählte Bereich, siehe css-tricks:nth-child(odd) wählt jedes zweite Element aus - 1,3,5,…:nth-child(even) wählt jedes zweite Element aus - 2,4,6,…
li:first-child { color: yellow; }
Die Pseudo Class :has() ist die Umkehrung des Descendant Selectors: Mit div:has(a) wird der div Tag selektiert, falls er einen a Tag als Nachkommen hat.
In :has(...) kann man auch kompliziertere Selektoren verwenden, zum Beispiel select:has(option[value=""]:checked). Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe Demo.
<style>
select:has(option[value=""]:checked) {
border-color: #ddd;
color: #ddd;
}
</style>
<select id="place_type" name="place_type">
<option value>--- Any Place Type ---</option>
<option value="River">River</option>
<option value="Lake">Lake</option>
</select>
Dieser Selector wählt das direkte Geschwister-Node aus.
p + h1 { color: yellow; }
li + li { color: yellow; }
Wenn man mehrere Selektoren kombiniert hat das Komma die geringste Präzedenz:
p, div a { color: yellow; }
/
#