CSS
Selektoren
Selektoren bestimmen, welche Elemente eine CSS-Regel trifft. Wer Selektoren beherrscht, braucht weniger Klassen und weniger Wiederholung.
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;
}Fortschritt
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.