Ausführbare CSS-Docs: CSS Selektoren

Q: Was ist ein CSS-Selektor?

Der Teil einer CSS-Regel vor der {, der festlegt, für welche Elemente die Deklarationen gelten. In p.note { color: blue; } trifft der Selektor p.note jedes mit der Klasse note.

Q: Was ist der Unterschied zwischen einem Leerzeichen und > in einem CSS-Selektor?

Ein Leerzeichen ist der Nachfahren-Kombinator: nav a trifft jeden Link irgendwo in einem nav, in beliebiger Tiefe. > ist der Kind-Kombinator: nav > a trifft nur Links, deren direktes Elternelement das nav ist.

Q: Was bedeutet + in CSS?

ist der Kombinator für den direkten Nachbarn. h2 + p trifft ein , das unmittelbar auf ein mit demselben Elternelement folgt. ~ ist lockerer: h2 ~ p trifft jedes spätere auf derselben Ebene.

Q: Wie wähle ich Elemente in CSS über ein Attribut aus?

Setz das Attribut in eckige Klammern: [disabled] trifft Elemente, die es haben, [type="email"] einen exakten Wert, [href^="https"] einen Wert, der mit einem String beginnt, [href$=".pdf"] einen, der damit endet, und [class*="btn"] einen, der ihn enthält.

Q: Kann CSS ein Elternelement auswählen?

Ja, mit der Pseudoklasse :has(), die aktuelle Versionen von Chrome, Firefox und Safari unterstützen. li:has(> a.active) trifft die Listeneinträge, die direkt einen aktiven Link enthalten.

Was ein CSS-Selektor ist

Ein Selektor ist der Teil einer Regel vor den geschweiften Klammern. Er entscheidet, für welche Elemente die Deklarationen gelten.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Die fünf grundlegenden Selektoren decken die meisten echten Stylesheets ab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Selektortypen im Überblick

Selektor	Beispiel	Trifft
Universal	`*`	Jedes Element
Typ	`p`	Jedes `<p>`
Klasse	`.tip`	Elemente mit `class="tip"` (unter anderem)
ID	`#main-title`	Das Element mit `id="main-title"`
Attribut	`[type="email"]`	Elemente, deren Attribut passt
Pseudoklasse	`a:hover`, `li:first-child`	Elemente in einem Zustand oder an einer Position
Pseudoelement	`p::first-line`, `.x::before`	Einen Teil eines Elements
Gruppe	`h1, h2, h3`	Alles, was auf einen Eintrag der Liste passt
Zusammengesetzt	`p.tip`	Ein `<p>`, das zusätzlich die Klasse hat

Klassen und IDs haben eine eigene Seite, CSS Klassenselektor. Pseudoklassen wie :nth-child() und :not() stehen auf der Seite zu Pseudoklassen.

Kombinatoren: Nachfahre vs. Kind

Ein Kombinator verbindet zwei Selektoren über ihre Beziehung im HTML-Baum. Es gibt vier.

Kombinator	Syntax	Trifft `B`, wenn
Nachfahre	`A B` (Leerzeichen)	B irgendwo in A steht
Kind	`A > B`	A das Elternelement von B ist
Direkter Nachbar	`A + B`	B direkt nach A kommt, gleiches Elternelement
Allgemeiner Nachbar	`A ~ B`	B irgendwo nach A kommt, gleiches Elternelement

Das Leerzeichen und das > sind das Paar, das oft verwechselt wird. Der Nachfahrenselektor reicht in jede Tiefe; der Kindselektor hört nach einer Ebene auf:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Geschwister-Kombinatoren: + und ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Geschwister-Kombinatoren schauen nur nach vorn. Einen Kombinator für das „vorherige Geschwister“ gibt es nicht, aber :has() kann es ausdrücken: h2:has(+ p) trifft ein h2, auf das direkt ein p folgt.

Attributselektoren

Eckige Klammern prüfen Attribute und ihre Werte:

Selektor	Trifft
`[disabled]`	Hat das Attribut, beliebiger Wert
`[type="email"]`	Wert ist genau `email`
`[href^="https"]`	Wert beginnt mit `https`
`[href$=".pdf"]`	Wert endet mit `.pdf`
`[class*="icon"]`	Wert enthält irgendwo `icon`
`[lang\|="en"]`	Wert ist `en` oder beginnt mit `en-`
`[data-state="open" i]`	Exakter Treffer, Groß- und Kleinschreibung egal

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Attributselektoren auf data-*-Attributen sind ein sauberer Weg, Zustände zu stylen, die JavaScript setzt, ohne Klassennamen zu erfinden.

Probier einen beliebigen Selektor aus

Tipp einen Selektor in das Feld. Jedes Element, das er trifft, bekommt eine bernsteinfarbene Umrandung, und darunter steht die Anzahl.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Probier #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Zusammengesetzt vs. Nachfahre: das Leerzeichen zählt

p.note und p .note unterscheiden sich um ein Leerzeichen und bedeuten Verschiedenes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Wie Browser Selektoren lesen

Wenn mehrere Regeln auf dasselbe Element passen und dieselbe Eigenschaft setzen, gewinnt der spezifischere Selektor, und bei Gleichstand gewinnt der spätere. Eine ID wiegt schwerer als beliebig viele Klassen, und eine Klasse schwerer als beliebig viele Typselektoren; die Seite zu !important enthält die vollständige Spezifitätstabelle.

Eine Gruppe hat einen Haken: Ist irgendein Selektor in einer einfachen Liste ungültig, wird die ganze Regel verworfen. Bei a, b:unknown { } werden nicht einmal die Links gestylt. Wenn du die Liste in :is() packst, wird sie nachsichtig, und :is(a, b:unknown) stylt die Links trotzdem.

Häufige Fehler

Punkt oder Raute fehlt. tip { } zielt auf ein <tip>-Element, nicht auf class="tip". Schreib .tip.
Leerzeichen in einem zusammengesetzten Selektor. p .note ist nicht p.note.
Erwarten, dass > Enkel erreicht. Für jede Tiefe nimmst du ein Leerzeichen.
Ein Tippfehler macht eine ganze Gruppe kaputt. Bei h1, h2:hovr, h3 wird nichts gestylt.
Zu lange Selektoren. body div.wrapper ul li a ist schwer zu lesen und schwer zu überschreiben. Eine einzelne Klasse reicht meistens.

Häufig gestellte Fragen

Was ist ein CSS-Selektor?

Der Teil einer CSS-Regel vor der {, der festlegt, für welche Elemente die Deklarationen gelten. In p.note { color: blue; } trifft der Selektor p.note jedes <p> mit der Klasse note.

Was ist der Unterschied zwischen einem Leerzeichen und > in einem CSS-Selektor?

Ein Leerzeichen ist der Nachfahren-Kombinator: nav a trifft jeden Link irgendwo in einem nav, in beliebiger Tiefe. > ist der Kind-Kombinator: nav > a trifft nur Links, deren direktes Elternelement das nav ist.

Was bedeutet + in CSS?

+ ist der Kombinator für den direkten Nachbarn. h2 + p trifft ein <p>, das unmittelbar auf ein <h2> mit demselben Elternelement folgt. ~ ist lockerer: h2 ~ p trifft jedes spätere <p> auf derselben Ebene.

Wie wähle ich Elemente in CSS über ein Attribut aus?

Setz das Attribut in eckige Klammern: [disabled] trifft Elemente, die es haben, [type="email"] einen exakten Wert, [href^="https"] einen Wert, der mit einem String beginnt, [href$=".pdf"] einen, der damit endet, und [class*="btn"] einen, der ihn enthält.

Kann CSS ein Elternelement auswählen?

Ja, mit der Pseudoklasse :has(), die aktuelle Versionen von Chrome, Firefox und Safari unterstützen. li:has(> a.active) trifft die Listeneinträge, die direkt einen aktiven Link enthalten.

Verwandte Konzepte