Selektoren und die Kaskade

Wenn zwei Regeln demselben Element verschiedene Farben geben, rät CSS nicht. Es vergleicht die Selektoren, und eine id schlägt jede beliebige Zahl von Klassen.

Elemente auswählen

Ein Selektor ist ein Muster, das auf Elemente der Seite passt. Die einfachsten wählen nach Elementname, Klasse oder id aus. p ist ein Typselektor und trifft jeden Absatz. .note ist ein Klassenselektor und trifft jedes Element mit class="note". Ein Element kann mehrere, durch Leerzeichen getrennte Klassen haben, und eine Klasse kann an vielen Elementen stehen. #intro ist ein id-Selektor und trifft das eine Element mit id="intro". *, der Universalselektor, trifft alles.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Selektoren kombinieren

Ein Komma gruppiert Selektoren mit denselben Deklarationen, so gestaltet h1, h2 beide. Ein Leerzeichen ist der Nachfahren-Kombinator: nav a trifft Links irgendwo in einem nav, egal wie tief. > ist strenger und trifft nur direkte Kinder. Stehen zwei einfache Selektoren ohne Leerzeichen zusammen, wie in a.active, muss ein Element beide erfüllen: ein Link, der außerdem die Klasse active hat. Attributselektoren in eckigen Klammern wählen nach Attribut aus, zum Beispiel input[type="email"].

Pseudoklassen, geschrieben mit einem Doppelpunkt, wählen Elemente in einem bestimmten Zustand oder an einer bestimmten Stelle aus: :hover, solange der Zeiger darüber ist, :focus-visible, wenn es den Tastaturfokus hat, :first-child, wenn es das erste Kind seines Elternelements ist. Pseudoelemente, geschrieben mit zwei Doppelpunkten, gestalten einen Teil eines Elements, etwa ::first-line oder ::placeholder.

Wenn Regeln sich widersprechen

Oft setzen mehrere Regeln dieselbe Eigenschaft am selben Element. Die Kaskade, das C in CSS, entscheidet, welche gewinnt. Lässt man die Browserstile und !important beiseite, klären zwei Fragen fast jeden Fall. Erstens: Welcher Selektor ist spezifischer? Die Spezifität zählt man als drei Zahlen: ids, dann Klassen (einschließlich Attributselektoren und Pseudoklassen), dann Elementnamen. #menu a ergibt 1-0-1, .active ergibt 0-1-0 und nav a ergibt 0-0-2. Verglichen wird von links, also schlägt eine id jede beliebige Zahl von Klassen. Zweitens: Ist die Spezifität gleich, gewinnt die Regel, die später im Stylesheet steht.

Inline-Attribute style schlagen jeden Selektor, und eine mit !important markierte Deklaration schlägt normale. Beides verleitet zur schnellen Lösung, erschwert aber die nächste Änderung, denn überschreiben kann man sie nur mit noch mehr davon. Die meisten Teams halten die Spezifität niedrig und gleichmäßig und gestalten vor allem mit Klassen. Dann reicht die Reihenfolge in der Datei, um das Ergebnis vorherzusagen.

Vererbung

Manche Eigenschaften gehen automatisch vom Eltern- auf das Kindelement über. Setzt du color oder font-family auf body, übernehmen das alle Absätze, Listen und Tabellenzellen darin, sofern keine Regel etwas Eigenes setzt. Texteigenschaften werden in der Regel vererbt. Box-Eigenschaften wie width, padding, border und margin nicht. Deshalb erscheint ein Rahmen um einen Abschnitt nicht um jeden Absatz darin. Das Schlüsselwort inherit zwingt eine Eigenschaft, den Wert des Elternelements zu übernehmen.

Benenne Klassen danach, was etwas ist, nicht wie es aussieht. .warning passt auch dann noch, wenn die Designerin die Farbe von Rot auf Orange ändert, .red-text nicht. ids sind eindeutig, deshalb nutzt man sie besser für Linkziele und Formular-Labels als zum Gestalten. So bleibt die Spezifität niedrig.