Selektoren
Selektoren bestimmen, welche Elemente eine CSS-Regel trifft. Wer Selektoren beherrscht, braucht weniger Klassen und weniger Wiederholung.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Grundselektoren
Der Elementselektor trifft alle Elemente eines Typs, etwa alle p-Absaetze.
Der Klassenselektor .klasse trifft alle Elemente mit dieser Klasse und ist der Standard für wiederverwendbare Stile.
Der ID-Selektor #id trifft genau ein Element. Der Universalselektor * trifft alles und wird oft für Resets genutzt.
p {
color: red;
}
.box {
background-color: orange;
}
#special {
border: 2px solid blue;
}
* {
box-sizing: border-box;
}Kombinatoren
Der Nachfahren-Kombinator (Leerzeichen) trifft Elemente irgendwo innerhalb eines anderen Elements.
Der Kind-Kombinator > trifft nur direkte Kinder. Das macht Regeln präziser und verhindert ungewollte Treffer in tieferen Ebenen.
/* Alle p innerhalb von div */
div p {
color: green;
}
/* Nur direkte p-Kinder von div */
div > p {
color: red;
}Pseudoklassen
:hover reagiert auf den Mauszeiger, :focus auf ein fokussiertes Eingabefeld.
:nth-child() trifft Elemente nach Position, etwa jede zweite Zeile. :not() schliesst Elemente aus, :first-child und :last-child treffen Anfang und Ende einer Liste.
button:hover {
background-color: blue;
color: white;
}
input:focus {
border-color: purple;
}
li:nth-child(even) {
background-color: #eef;
}Attribute und Pseudoelemente
Attributselektoren wie [type="password"] treffen Elemente anhand ihrer HTML-Attribute.
::before und ::after erzeugen zusätzliche Inhalte vor oder nach einem Element, etwa Icons oder Dekorationen.
.bestseller::before {
content: "\2605";
color: green;
margin-right: 5px;
}Vertiefung
Selektoren beschreiben Absicht
Gute Selektoren sind kurz, stabil und sagen, was sie treffen. Klassen sind wiederverwendbar; IDs sind für Sprungmarken und eindeutige Elemente gedacht, nicht als Styling-Werkzeug.
Kombinatoren und Pseudoklassen machen Regeln präzise: > trifft nur direkte Kinder, :not() schließt Fälle aus, :focus-visible zeigt Fokus nur bei Tastaturbedienung.
.card > .card__title {
margin-block: 0;
}
.card:not(.card--compact) {
padding: 1.5rem;
}
.button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}Merksatz: Styling über Klassen und Zustände. IDs bleiben für eindeutige Ziele, nicht für hohe Spezifität.
Übungsaufgabe
Robuste Karten-Selektoren
Style eine Kartenliste: nur direkte Titel in der Karte, jede zweite Karte anders, kompakte Karten ausgenommen und ein sichtbarer Tastaturfokus.
Das soll dein Programm können
- Klassenselektoren statt IDs
- Kind-Kombinator für den Titel
- :nth-child(even) für die zweite Karte
- :not() für kompakte Karten
- :focus-visible für den Button
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Die Regel .card:not(.card--compact) trifft alle Karten außer den kompakten. Für den Titel: .card > .card__title.
Lösung anzeigen
.card > .card__title {
margin-block: 0;
}
.card:not(.card--compact) {
padding: 1.5rem;
}
.cards > .card:nth-child(even) {
background: #f1f5f9;
}
.button:focus-visible {
outline: 3px solid #0f766e;
outline-offset: 2px;
}Warum funktioniert das?
Der Kind-Kombinator verhindert, dass verschachtelte Titel außerhalb der Karte getroffen werden. :nth-child zählt alle Geschwister; :not hält Ausnahmen lesbar.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.