CSS-Selektoren: Wen soll es treffen?
Der Selektor ist die Adresse einer CSS-Regel: Er bestimmt für welche Elemente die Anweisungen in den geschweiften Klammern gelten. Selektoren gut zu beherrschen heißt, präzise zu treffen statt mit Klassen um sich zu werfen.
Die Grundausstattung
| Selektor | Trifft | Beispiel |
|---|---|---|
| Elementname | alle Elemente dieses Typs | p { ... } |
| .klasse | alles mit dieser Klasse | .hinweis { ... } |
| #id | das eine Element mit dieser id | #logo { ... } |
| * | schlicht alles | * { box-sizing: border-box; } |
| Kombination | nur wenn beides zutrifft | p.hinweis { ... } |
| Aufzählung | mehrere Ziele, eine Regel | h1, h2, h3 { ... } |
Verschachtelung: der Kontext zählt
CSS-Code
nav a { text-decoration: none; } /* alle Links IN einer nav */
nav > a { font-weight: bold; } /* nur direkte Kinder der nav */Das Leerzeichen bedeutet "irgendwo darin", das > bedeutet "direkt darunter". Damit stylst du Links im Menü anders als Links im Fließtext, ohne einem einzigen Link eine Klasse geben zu müsen.
Pseudoklassen: Zustände ansprechen
a:hover { color: red; } /* Maus drüber */
a:visited { color: purple; } /* schon besucht */
input:focus { outline: 2px dotted black; }
li:first-child { margin-top: 0; }Pseudoklassen beginnen mit einem Doppelpunkt und treffen Zustände oder Positionen: berührt, fokussiert, besucht, erstes Kind. Das lila :visited und das schlichte :hover waren übrigens schon 1998 dabei, die klassischen Linkfarben dieser Website kommen genau daherr.
Wer gewinnt? Die Spezifität
Treffen mehrere Regeln dasselbe Element, gewinnt die spezifischere: Eine ID wiegt schwerer als eine Klasse, eine Klasse schwerer als ein Elementname. Bei Gleichstand siegt die Regel die später im Stylesheet steht. Der praktische Rat daraus: möglichst flach selektieren. Wer Selektoren wie div#main ul li a.link stapelt, baut sich Spezifitäts-Türme, die später nur noch mit !important zu übertrumpfen sind, und dann hat man zwei Probleme statt einem.
Typische Fehler
- Punkt oder Raute vergessen:
hinweis { }sucht ein Element namens hinweis, nicht die Klasse. - Alles über IDs stylen, siehe Klassen und IDs.
!importantals Alltagswerkzeug statt als Notausgang.
Weiter im Lernpfad: Klassen und IDs · Zurück: CSS einbinden