Selektoren

Im vorigen Kapitel hast du Elemente über ihren Namen und über Klassen ausgewählt. Damit kommst du schon weit. In diesem Kapitel lernst du die übrigen Selektoren kennen, und zwar der Reihe nach: Jeder löst eine bestimmte Aufgabe, die mit den bisherigen Mitteln nicht zu lösen ist.

Was du am Ende kannst

• mehrere Selektoren in einer Regel zusammenfassen
• Elemente über Attribute auswählen
• Elemente nach ihrer Position in der Struktur auswählen
• Zustände wie Maus und Tastaturfokus gestalten
• Pseudoelemente für Schmuck einsetzen
• zu einer Aufgabe den passenden Selektor wählen

Live-Coding zum Mitmachen

⤓ demo-06-selektoren.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Mehrere Selektoren in einer Regel

Aufgabe: Verschiedene Elemente sollen dieselben Eigenschaften bekommen.

Im vorigen Kapitel standen zwei gleiche Regeln für h1 und h2. Eine Selektorliste fasst sie zusammen:

h1,
h2 {
  color: #0f766e;
}

Das Komma bedeutet „und auch“. Üblich ist eine Zeile pro Selektor.

Der ID-Selektor

Aufgabe: Genau ein bestimmtes Element ansprechen.

Eine id darf auf einer Seite nur einmal vorkommen. Im CSS wählst du sie mit einer Raute aus:

<main id="inhalt">…</main>

#inhalt {
  padding: 1rem;
}

In HTML ist die id wichtig, etwa als Ziel eines Ankers oder für die Verbindung von label und Feld. Im CSS solltest du sie meiden: Regeln mit einer ID lassen sich nur schwer überschreiben. Warum das so ist, klärt das nächste Kapitel. Nimm stattdessen eine Klasse.

Attribut-Selektoren

Aufgabe: Elemente nach ihren Attributen auswählen, ohne eine Klasse zu vergeben.

Auswahl über Attribute

a[href^="https"] {
  color: teal;
}

input[type="email"] {
  border: 2px solid teal;
}

<p><a href="termine.html">Ein Link innerhalb der Website</a></p>
<p><a href="https://example.org/">Ein Link, dessen Adresse mit https beginnt</a></p>
<p><input type="text" aria-label="Text"> <input type="email" aria-label="E-Mail"></p>

Selektor	Trifft
[required]	Elemente, die das Attribut besitzen
[type="email"]	Elemente mit genau diesem Wert
[href^="https"]	Werte, die so beginnen
[href$=".pdf"]	Werte, die so enden

Besonders nützlich ist [aria-current="page"]. Dasselbe Attribut, das dem Screenreader den aktuellen Menüpunkt nennt, dient dann auch als Haken für die Gestaltung.

Kombinatoren: Auswahl nach der Struktur

Aufgabe: Elemente danach auswählen, wo sie im HTML stehen.

Das HTML bildet einen Baum: Elemente enthalten Elemente. Ein Kombinator verbindet zwei Selektoren und beschreibt, wie die Elemente zueinander stehen. Gestaltet wird immer das letzte Element im Selektor.

Nachfahren: das Leerzeichen

nav a trifft jeden Link, der irgendwo innerhalb eines nav liegt, egal wie tief.

Nur Links innerhalb von nav

nav a {
  color: teal;
  font-weight: bold;
}

<nav aria-label="Beispielmenü">
  <ul>
    <li><a href="#">Dieser Link steht in einem nav</a></li>
  </ul>
</nav>
<p><a href="#">Dieser Link steht außerhalb</a></p>

Direkte Kinder: >

.karte > p trifft nur Absätze, die unmittelbar in .karte liegen.

Kind, aber nicht Enkel

.karte > p {
  border-left: 4px solid teal;
  padding-left: 0.5rem;
}

<div class="karte">
  <p>Direktes Kind von .karte: Die Regel greift.</p>
  <blockquote>
    <p>Enkel von .karte: Die Regel greift nicht.</p>
  </blockquote>
</div>

Direkte Nachbarn: +

h3 + p trifft einen Absatz, der direkt nach einer h3 auf derselben Ebene folgt.

Nur der erste Absatz nach der Überschrift

h3 + p {
  font-weight: bold;
}

<h3>Eine Überschrift</h3>
<p>Dieser Absatz folgt direkt auf die Überschrift.</p>
<p>Dieser Absatz folgt erst danach und bleibt normal.</p>

Daneben gibt es h3 ~ p für alle folgenden Absätze auf dieser Ebene.

Kombination ohne Leerzeichen

p.hinweis trifft Elemente, die beides zugleich sind: ein p mit der Klasse hinweis. Das Leerzeichen macht also einen wesentlichen Unterschied:

Selektor	Trifft
p.hinweis	einen Absatz mit der Klasse hinweis
p .hinweis	ein Element mit der Klasse hinweis innerhalb eines Absatzes

Pseudoklassen: Zustände und Positionen

Aufgabe: Elemente auswählen, je nachdem, in welchem Zustand sie gerade sind.

Eine Pseudoklasse wird mit einem Doppelpunkt angehängt und beschreibt etwas, das nicht im HTML steht.

Pseudoklassen im Einsatz

a:hover {
  background: #ccfbf1;
}

a:focus-visible,
input:focus-visible {
  outline: 3px solid #d97706;
}

input:invalid {
  border: 2px solid #b91c1c;
}

li:first-child {
  font-weight: bold;
}

li:nth-child(even) {
  background: #eef6f4;
}

<p><a href="#">Fahre mit der Maus über mich oder drücke die Tab-Taste</a></p>
<p><label>E-Mail: <input type="email" value="keine-adresse"></label></p>
<ul>
  <li>Erster Eintrag</li>
  <li>Zweiter Eintrag</li>
  <li>Dritter Eintrag</li>
  <li>Vierter Eintrag</li>
</ul>

Pseudoklasse	Trifft
:hover	Element unter dem Mauszeiger
:focus-visible	Element mit Tastaturfokus. Gestalte das immer sichtbar
:invalid, :checked, :disabled, :required	Zustände von Formularfeldern
:first-child, :last-child	erstes und letztes Kind
:nth-child(even)	jedes zweite Kind, odd für die anderen
:not(.x)	alle außer diesen

Pseudoelemente: Teile und Zusätze

Aufgabe: Einen Teil eines Elements gestalten oder Schmuck einfügen, ohne das HTML zu ändern.

Pseudoelemente haben zwei Doppelpunkte. ::before und ::after fügen Inhalt am Anfang oder Ende eines Elements ein, dafür ist die Eigenschaft content nötig.

::before, ::after und ::first-line

.pflicht::after { content: " *"; color: #b91c1c; }
blockquote::before { content: "„"; font-size: 2rem; color: #0f766e; }
p::first-line { font-weight: bold; }

<label class="pflicht">E-Mail</label>
<blockquote>Der schwerste Schritt ist der aus der Haustür.</blockquote>
<p>Die erste Zeile dieses Absatzes ist fett, egal wie breit das Fenster gerade ist.
Der Rest bleibt normal und das passt der Browser beim Vergrößern selbst an.</p>

Text aus content wird nicht von jedem Screenreader vorgelesen und lässt sich nicht markieren. Verwende ihn nur für Schmuck, nie für wichtigen Inhalt.

Überblick

Aufgabe	Selektor	Beispiel
alle Elemente einer Art	Element	p
wiederverwendbare Auswahl	Klasse	.hinweis
ein einzelnes Element	ID, im CSS meiden	#inhalt
mehrere auf einmal	Liste	h1, h2
nach einem Attribut	Attribut	[aria-current="page"]
nach der Lage im HTML	Kombinator	nav a, .karte > p, h3 + p
nach dem Zustand	Pseudoklasse	a:hover
Teil oder Zusatz	Pseudoelement	li::before

Live-Coding: Menü und Tabelle

Wir fassen die Überschriften zusammen, vergeben dem Menü die Klasse hauptmenue und markieren den aktuellen Menüpunkt mit aria-current="page". Dazu kommen Zustände für Links und ein Streifenmuster in der Tabelle.

stil.css

/* Elemente: gelten überall */
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  color: #1c2330;
}

h1,
h2 {
  color: #0f766e;
}

/* Nachfahren: nur der Absatz im Kopf */
header p {
  font-size: 1.25rem;
  font-weight: bold;
}

/* Klassen: wiederverwendbar */
.hauptmenue {
  padding: 0;
  list-style: none;
}

.hauptmenue li {
  display: inline;
  margin-right: 1rem;
}

.hinweis {
  color: #55606e;
  font-style: italic;
}

/* Attribut: der aktuelle Menüpunkt */
a[aria-current="page"] {
  font-weight: bold;
}

/* Pseudoklassen: Zustände */
a:hover {
  color: #0f766e;
}

a:focus-visible {
  outline: 3px solid #d97706;
}

tbody tr:nth-child(even) {
  background: #eef6f4;
}

Übung

Starter für die Übung

⤓ uebung-06-selektoren.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Erweitere stil.css. Prüfe nach jedem Schritt im Browser, ob du die Elemente triffst, die du treffen wolltest.

Stufe 1: Liste und Attribut

Stelle caption und th mit einer gemeinsamen Regel linksbündig dar. Gib dem E-Mail-Feld im Kontaktformular über einen Attribut-Selektor einen türkisen Rahmen.

Stufe 2: Kombinationen

Färbe nur die Listeneinträge der Liste mit der Klasse vorteile. Mache die legend im fieldset fett, mit einem kombinierten Selektor.

Stufe 3: Zustände

Hebe eine Tabellenzeile unter der Maus hervor. Gib fokussierten Feldern eine deutliche Kontur. Färbe ungültige Eingaben ein (:invalid). Was passiert mit den leeren Pflichtfeldern gleich beim Laden der Seite?

Für Schnelle

Setze vor jeden mailto:-Link ein ✉ und hinter jeden externen Link ein ↗, nur mit Attribut-Selektoren und Pseudoelementen.