Wer nach CSS-Selektoren sucht, sucht meistens nicht nach einer Einführung. Er sucht nach einem Zeichen, das er gerade in fremdem Code gesehen hat und nicht einordnen kann.
Die Zeichen
| Zeichen | Bedeutung | Beispiel | trifft |
|---|---|---|---|
| — | Elementname | p | alle Absätze |
. | Klasse | .hinweis | alle Elemente mit class="hinweis" |
# | ID | #kopf | das Element mit id="kopf" |
* | alle Elemente | * | jedes Element im Dokument |
, | Aufzählung | h1, h2 | beide, mit denselben Regeln |
| Zeichen | Bedeutung | Beispiel | trifft |
|---|---|---|---|
| Leerzeichen | beliebiger Nachfahre | nav a | jeden Verweis irgendwo in der Navigation |
> | unmittelbares Kind | ul > li | nur direkt enthaltene Listeneinträge |
+ | direkt folgendes Geschwister | h2 + p | nur den ersten Absatz nach der Überschrift |
~ | alle folgenden Geschwister | h2 ~ p | alle Absätze nach der Überschrift |
+ trifft eines, ~ trifft alle. Beide nur bei gleichem Elternelement und nur nach vorn – ein „vorhergehendes Geschwister" gibt es in dieser Form nicht.
Attribute in eckigen Klammern
| Schreibweise | trifft, wenn der Wert … | Beispiel |
|---|---|---|
[attr] | überhaupt vorhanden ist | [disabled] |
[attr="wert"] | genau gleich ist | [type="email"] |
[attr^="wert"] | damit beginnt | [href^="https"] |
[attr$="wert"] | damit endet | [href$=".pdf"] |
[attr*="wert"] | ihn irgendwo enthält | [class*="btn"] |
Die drei letzten sind im Alltag nützlicher, als ihr Ruf vermuten lässt: Damit lassen sich alle Verweise auf PDF-Dateien oder alle externen Verweise kennzeichnen, ohne jede einzelne Stelle im HTML anzufassen.
Doppelpunkte
Ein Doppelpunkt leitet eine Pseudoklasse ein – einen Zustand oder eine Position:
:hover,:focus,:active– Zustände bei Bedienung:first-child,:last-child,:nth-child(2n)– Position unter Geschwistern:not(.aus)– alles außer dem Genannten:checked,:disabled– Zustände von Formularfeldern
Zwei Doppelpunkte leiten ein Pseudoelement ein – etwas, das im HTML gar nicht steht: ::before, ::after, ::first-line, ::marker.
Warum eine Regel nicht greift
Das ist die eigentliche Frage hinter den meisten Suchanfragen, und die Antwort heißt fast immer Spezifität. Treffen mehrere Regeln auf dasselbe Element zu, gewinnt die mit dem höheren Wert:
| Art | Gewicht | Beispiel |
|---|---|---|
| Inline im HTML | am schwersten | style="…" |
| ID | schwer | #kopf |
| Klasse, Attribut, Pseudoklasse | mittel | .hinweis, [type], :hover |
| Elementname, Pseudoelement | leicht | p, ::before |
Gezählt wird je Art. Eine Regel mit einer ID schlägt jede Regel ohne ID – egal, wie viele Klassen darin stehen. Bei gleicher Spezifität gewinnt die Regel, die weiter unten steht. Daher der Name: Cascading Style Sheets.
Sie wiegen so schwer, dass sich eine damit gesetzte Eigenschaft später über Klassen nicht mehr überschreiben lässt. Der übliche Ausweg ist !important – und der erzeugt genau dasselbe Problem eine Ebene höher.
Brauchbare Aufteilung: IDs für Sprungmarken und JavaScript, Klassen für die Gestaltung.
Die drei Ursachen im Prüfschritt
- Trifft der Selektor überhaupt etwas?
In den Entwicklerwerkzeugen des Browsers den Selektor in der Konsole testen. Kommt nichts zurück, ist die Regel nicht zu schwach, sondern falsch.
- Gewinnt eine andere Regel?
Element auswählen; die Entwicklerwerkzeuge zeigen alle zutreffenden Regeln, die überschriebenen durchgestrichen. Damit ist die Frage in Sekunden beantwortet.
- Steht die Regel an der falschen Stelle?
Bei gleicher Spezifität entscheidet die Reihenfolge. Eine später eingebundene Datei überschreibt eine frühere.
Wofür das hier steht
Selektoren sind nicht nur Gestaltung. Dieselbe Schreibweise gilt in den Entwicklerwerkzeugen, in document.querySelector() und in praktisch jedem Werkzeug, das Inhalte aus HTML herauslöst. Wer sie liest, kann fremde Vorlagen nachvollziehen, statt zu raten – und findet Ursachen dort, wo sie liegen.