Selektoren für Fortgeschrittene

Mehr Selektoren

Im CSS-Kapitel habt ihr die wichtigsten Selektoren kennengelernt: Element, Klasse, ID, Descendant ( ) und Child Combinator (>) sowie die Pseudo-Klassen für Links und Fokus. Damit kommt ihr schon sehr weit.

Hier folgen Selektoren, mit denen ihr Elemente noch gezielter auswählen könnt - oft ganz ohne zusätzliche Klassen im HTML:

• Attribut-Selektoren - anhand von HTML-Attributen auswählen
• :first-child, :nth-child() - anhand der Position unter Geschwistern auswählen
• Pseudo-Elemente - nur einen Teil eines Elements auswählen
• :has() - ein Element anhand seines Inhalts auswählen

Attribut-Selektoren

Elemente lassen sich auch anhand ihrer HTML-Attribute auswählen. Zum Beispiel alle Links, deren href mit mailto: beginnt:

a[href^="mailto:"] { color: yellow; }

Es gibt mehrere Varianten:

a[href]                        /* Attribut existiert, egal mit welchem Wert */
a[href="https://example.com"]  /* Attribut hat genau diesen Wert */
a[href^="mailto:"]             /* Wert beginnt mit ... */
a[href$=".pdf"]                /* Wert endet mit ... */
a[href*="example"]             /* Wert enthält ... irgendwo */

Tipp

Praktisch, um zum Beispiel alle Links zu PDFs (a[href$=".pdf"]) automatisch mit einem Download-Icon zu versehen - ganz ohne zusätzliche Klasse im HTML.

Geschwister zählen: :first-child, :last-child, :nth-child()

Diese Pseudo-Klassen wählen ein Element anhand seiner Position unter Geschwister-Elementen aus, unabhängig vom Tag-Namen:

li:first-child { font-weight: bold; }   /* nur das erste li in seiner Liste */
li:last-child  { border-bottom: none; } /* nur das letzte li */

li:nth-child(odd)  { background-color: #f9fafb; } /* 1., 3., 5., ... */
li:nth-child(even) { background-color: white; }    /* 2., 4., 6., ... */
li:nth-child(3)     { color: red; }                 /* genau das dritte */

Klassiker

“Zebra-Streifen” für Tabellenzeilen mit tr:nth-child(even) / tr:nth-child(odd) - ganz ohne im HTML abwechselnd Klassen vergeben zu müssen.

Achtung

:first-child trifft nur, wenn das Element wirklich das erste Kind seines Elternelements ist. li:first-child trifft also nichts, falls vor dem ersten li noch ein anderes Element steht - zum Beispiel ein Kommentar oder <script>.

Pseudo-Elemente: Teile eines Elements auswählen

Manche Selektoren wählen keinen ganzen DOM-Knoten aus, sondern nur einen Teil davon. Erkennbar sind sie am doppelten Doppelpunkt :::

p::first-letter { font-size: 2em; }        /* nur der erste Buchstabe */
p::first-line   { font-weight: bold; }     /* nur die erste (gerenderte) Zeile */
::selection      { background-color: gold; } /* der aktuell markierte Text */

Hinweis

Das ist etwas Besonderes: ::first-letter “erfindet” quasi einen Tag, den es im HTML gar nicht gibt. Im Markup steht ja nur <p>Text...</p>, kein eigenes Element für den ersten Buchstaben. Der Browser rendert das Ergebnis trotzdem so, als gäbe es dort eins.

Hinweis

Die *::before/*::after-Regel aus dem box-sizing-Reset (Box-Modell-Kapitel) nutzt dieselbe ::-Schreibweise. Auch das sind Pseudo-Elemente - nur ohne Inhalt, bis man ihnen per content selbst welchen gibt.

:has(): die Umkehrung des Descendant Combinators

section a wählt ein a innerhalb einer section. Manchmal will man aber das Elternelement selbst auswählen, abhängig davon, was es enthält. Dafür gibt es :has():

/* section, falls sie MINDESTENS EINEN Link enthält */
section:has(a) {
  border-left: 3px solid gold;
}

Praxisbeispiel: Ein Formularfeld rot markieren, wenn eine leere Option ausgewählt ist:

select:has(option[value=""]:checked) {
  border-color: red;
}

<select>
  <option value="">--- Bitte wählen ---</option>
  <option value="fluss">Fluss</option>
  <option value="see">See</option>
</select>

Tipp

:has() lässt sich beliebig mit anderen Selektoren kombinieren. Hier steckt sogar noch ein Attribut-Selektor (option[value=""]) und eine weitere Pseudo-Klasse (:checked) mit drin.

Überblick

Name	Muster	Beschreibung
Attribut-Selektor	E[attr^="wert"]	Trifft, wenn ein Attributwert mit wert beginnt (auch $=, *=, =)
:nth-child() u.ä.	:first-child :nth-child(3) :nth-child(odd) :last-child	Zählt Geschwister-Elemente, trifft je nach Position
Pseudo-Elemente	E::first-letter E::first-line ::selection	Wählt nur einen Teil eines Elements, keinen eigenen DOM-Knoten
:has()-Pseudo-Klasse	E:has(F)	Trifft jedes E, das ein F als Nachkomme enthält

Zum selbst Üben

• CSS Diner - die späteren Level üben genau diese Selektoren