CSS-Kombinatoren und Spezifität im Detail

Das präzise Ansprechen von HTML-Elementen und das Verstehen der CSS-Kaskade sind grundlegende Fähigkeiten im Webdesign. Um komplexe Layouts zu steuern, stellt CSS verschiedene Kombinatoren (Verbindungen zwischen Selektoren) bereit. Wenn mehrere Regeln auf dasselbe Element zutreffen, entscheidet die Spezifität (Specificity) des Selektors, welche Regel angewendet wird.

Diese Anleitung erklärt die wichtigsten Kombinatoren und wie die Spezifität berechnet wird.

1. CSS-Kombinatoren im Überblick

Kombinatoren verbinden zwei oder mehr einfache Selektoren, um eine Beziehung zwischen ihnen zu definieren.

Nachfahren-Selektor (Descendant Combinator: Space)

Wählt alle passenden Elemente aus, die sich irgendwo innerhalb des Eltern-Elements befinden (beliebig tief verschachtelt).

/* Wählt jedes <li> aus, das sich irgendwo innerhalb eines <ul> befindet */
ul li {
  margin-bottom: 5px;
}

Kind-Selektor (Child Combinator: >)

Wählt nur Elemente aus, die direkte Nachkommen (Kinder) des Eltern-Elements auf der ersten Ebene sind.

/* Wählt nur <li>-Elemente aus, die direkte Kinder von <ul> sind */
ul > li {
  font-weight: bold;
}

Nachbar-Selektor (Adjacent Sibling Combinator: +)

Wählt ein Element aus, das direkt auf ein anderes Element folgt und denselben Elternknoten hat.

/* Wählt alle Absätze (<p>) aus, die direkt auf einen anderen Absatz folgen */
p + p {
  margin-top: 0; /* Verhindert doppelten Abstand zwischen Absätzen */
}

/* Wählt eine Liste aus, die direkt auf ein Element mit der ID "title" folgt */
#title + ul {
  margin-top: 10px;
}

Allgemeiner Geschwister-Selektor (General Sibling Combinator: ~)

Wählt alle Elemente aus, die auf ein anderes Element folgen und denselben Elternknoten haben, unabhängig davon, ob sie direkt benachbart sind.

/* Wählt alle Bilder (<img>) aus, die nach einer Überschrift (<h1>) auf derselben Ebene kommen */
h1 ~ img {
  border: 1px solid #ccc;
}

2. CSS-Spezifität berechnen

Wenn widersprüchliche CSS-Regeln auf dasselbe Element zutreffen, gewinnt der Selektor mit der höchsten Spezifität. Die Spezifität lässt sich als ein vierteiliges Punktesystem (0, 0, 0, 0) verstehen:

1. Inline-Styles (1, 0, 0, 0): Stile, die direkt im HTML-Element über das style-Attribut definiert sind.
2. IDs (0, 1, 0, 0): Selektoren mit einer ID (z.B. #header).
3. Klassen, Attribute und Pseudo-Klassen (0, 0, 1, 0): (z.B. .btn, [type="checkbox"], :checked).
4. Elemente und Pseudo-Elemente (0, 0, 0, 1): (z.B. div, p, ::before).

Wichtig: Universal-Selektoren (*) und Kombinatoren (+, >, ~) haben keine Spezifität (0, 0, 0, 0). Das !important-Flag steht außerhalb dieses Systems und überschreibt alle anderen Werte (sollte jedoch nur in absoluten Ausnahmefällen verwendet werden).

3. Praxis-Beispiel für Spezifität

Nehmen wir an, wir haben die folgenden drei CSS-Blöcke:

/* Block 1: ID-Selektor mit Attribut */
/* Spezifität: (0, 1, 1, 0) = 1 ID, 1 Attribut */
#form input[type="checkbox"] {
  background: pink;
}

/* Block 2: Klassen-Selektor mit Element */
/* Spezifität: (0, 0, 1, 1) = 1 Klasse, 1 Element */
.form-group input {
  background: salmon;
}

/* Block 3: Reiner Element-Selektor */
/* Spezifität: (0, 0, 0, 1) = 1 Element */
input {
  background: aquamarine;
}

Wenn auf der Seite ein <input type="checkbox"> innerhalb eines <div id="form" className="form-group"> gerendert wird, gewinnt Block 1, da ein ID-basierter Selektor (Spezifität 0,1,1,0) immer stärker ist als ein klassen- oder elementbasierter Selektor. Die Hintergrundfarbe wird somit pink.

Fazit

Die gezielte Verwendung von CSS-Kombinatoren wie > und + ermöglicht es, komplexe Beziehungen im Dokumentenbaum abzubilden, ohne jedes Element mit einer eigenen Klasse versehen zu müssen. Das Verständnis der Spezifität ist unerlässlich, um zu verstehen, warum manche CSS-Regeln nicht angewendet werden, und hilft dabei, "CSS-Spezifitäts-Kriege" (die oft im Missbrauch von !important enden) im Projekt zu vermeiden.