Ausführbare CSS-Docs: Pseudoklassen

Q: Wie funktioniert nth-child in CSS?

:nth-child(an+b) trifft Elemente, deren Position unter ihren Geschwistern a×n+b ist, für n = 0, 1, 2 und so weiter, gezählt ab 1. :nth-child(3) ist das dritte Kind, :nth-child(odd) oder 2n+1 jedes ungerade und :nth-child(n+4) das vierte und alle danach.

Q: Was ist der Unterschied zwischen nth-child und nth-of-type?

:nth-child() zählt alle Geschwisterelemente und prüft danach den Rest des Selektors; :nth-of-type() zählt nur Geschwister desselben Elementtyps. In einer Folge aus einem h2 und mehreren Absätzen trifft p:nth-child(1) nichts, während p:nth-of-type(1) den ersten Absatz trifft.

Q: Wie verwendet man :not() in CSS?

Schreib den auszuschließenden Selektor in die Klammern: li:not(.done) trifft jeden Listeneintrag ohne die Klasse done. Es nimmt auch eine Liste an, input:not([type="checkbox"], [type="radio"]).

Q: Was ist der Unterschied zwischen einer Pseudoklasse und einem Pseudoelement?

Eine Pseudoklasse (ein Doppelpunkt, :hover) wählt ein ganzes vorhandenes Element in einem bestimmten Zustand aus. Ein Pseudoelement (zwei Doppelpunkte, ::before) zielt auf einen Teil eines Elements oder erzeugt generierten Inhalt.

Was eine Pseudoklasse ist

Eine Pseudoklasse ist ein Schlüsselwort nach einem Doppelpunkt, das Elemente nach ihrer Position im Dokument oder ihrem Zustand auswählt. Du hängst sie an einen normalen Selektor an: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Zustands-Pseudoklassen für Links und die Maus (:hover, :active, :visited) haben eine eigene Seite, CSS hover.

:nth-child() und die Formel an+b

:nth-child() nimmt eine Zahl, ein Schlüsselwort oder eine Formel an+b. Der Browser probiert n = 0, 1, 2, ... und trifft jede Position, die die Formel ergibt (Positionen beginnen bei 1).

Formel	Trifft Positionen	Bedeutung
`3`	3	Das dritte Kind
`odd` oder `2n+1`	1, 3, 5, ...	Ungerade Zeilen
`even` oder `2n`	2, 4, 6, ...	Gerade Zeilen
`3n`	3, 6, 9, ...	Jedes dritte
`n+4`	4, 5, 6, ...	Das vierte und alle danach
`-n+3`	1, 2, 3	Die ersten drei
`3n+1`	1, 4, 7, ...	Jedes dritte, beginnend beim ersten

Tipp eine Formel ein und sieh, welche Einträge getroffen werden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Probier odd, even, 4, n+7, -n+5 und 2n+3. Eine ungültige Formel trifft nichts.

Das Gegenstück, das von hinten zählt, ist :nth-last-child(): li:nth-last-child(-n+2) wählt die letzten zwei Einträge.

nth-child vs. nth-of-type

:nth-child() zählt jedes Geschwisterelement, egal welcher Tag, und prüft erst danach den Rest des Selektors. :nth-of-type() zählt nur Geschwister mit demselben Tag. Der Unterschied zeigt sich, sobald die Geschwister gemischt sind:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Dieselben Paare gibt es für die Enden: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() und :where()

Pseudoklasse	Beispiel	Trifft
`:not(X)`	`li:not(.done)`	Elemente, die nicht auf X passen
`:is(X, Y)`	`:is(h1, h2, h3) a`	Elemente, die auf einen Eintrag der Liste passen
`:where(X, Y)`	`:where(ul, ol) li`	Wie `:is()`, mit Spezifität null
`:has(X)`	`li:has(> input:checked)`	Elemente, die einen Treffer für X enthalten

:not() brauchst du ständig, zum Beispiel für einen Trenner zwischen Einträgen, aber nicht nach dem letzten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Zustands-Pseudoklassen: focus, checked, disabled, invalid

Pseudoklasse	Trifft
`:focus`	Das Element, das den Tastatur- oder Mausfokus hat
`:focus-visible`	Fokussiert, und der Browser entscheidet, dass ein Fokusring erscheinen soll (meist bei Tastaturfokus)
`:focus-within`	Ein Element, das das fokussierte Element enthält
`:checked`	Eine angehakte Checkbox, ein gewählter Radio-Button oder eine gewählte `<option>`
`:disabled` / `:enabled`	Formularelemente, die (nicht) deaktiviert sind
`:required` / `:optional`	Eingabefelder mit oder ohne `required`
`:invalid` / `:valid`	Eingabefelder, deren Wert die Validierung nicht besteht oder besteht
`:user-invalid`	Ungültig, aber erst, nachdem der Nutzer damit interagiert hat
`:placeholder-shown`	Ein Eingabefeld, das gerade seinen Platzhalter zeigt
`:empty`	Ein Element ohne Kinder, nicht einmal Text
`:target`	Das Element, dessen id zum `#fragment` der URL passt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Klick in das E-Mail-Feld: Sein Label wird durch :focus-within blau. Tipp etwas ein, das keine E-Mail-Adresse ist, und verlass das Feld: :user-invalid färbt den Rahmen bernsteinfarben. Ein einfaches :invalid hätte das leere Pflichtfeld schon markiert, bevor du es berührt hast.

Was auch immer du mit :focus machst, behalte einen sichtbaren Fokusstil. Wer die Umrandung ohne Ersatz entfernt, lässt Tastaturnutzer im Unklaren darüber, wo sie gerade sind.

:has(), der Elternselektor

:has() trifft ein Element anhand dessen, was es enthält. Das ist der lange gewünschte „Elternselektor“, und er funktioniert in aktuellen Versionen von Chrome, Firefox und Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Wähl den anderen Tarif: Die ganze Karte folgt dem Radio-Button, ganz ohne JavaScript.

Häufige Fehler

Ein Leerzeichen vor dem Doppelpunkt. li :first-child bedeutet „ein erstes Kind innerhalb eines li“. Schreib li:first-child.
Erwarten, dass p:nth-child(1) „das erste p“ bedeutet. Es bedeutet „das erste Kind, falls es ein p ist“. Für das erste p nimmst du :first-of-type.
Ab 0 zählen. Positionen beginnen bei 1: :nth-child(0) trifft nichts.
Fokus-Umrandungen entfernen. :focus { outline: none } ohne Ersatz macht die Tastaturnavigation kaputt.
: und :: verwechseln. :before ist eine alte Schreibweise des Pseudoelements ::before; Pseudoklassen haben immer einen Doppelpunkt.

Häufig gestellte Fragen

Was ist eine Pseudoklasse in CSS?

Ein Schlüsselwort nach einem Doppelpunkt, das Elemente nach Zustand oder Position auswählt statt nach Namen, etwa a:hover, li:first-child oder input:focus. Es wird an einen normalen Selektor angehängt, und die meisten Pseudoklassen zählen für die Spezifität wie eine Klasse (:where() zählt null).

Wie funktioniert nth-child in CSS?

:nth-child(an+b) trifft Elemente, deren Position unter ihren Geschwistern a×n+b ist, für n = 0, 1, 2 und so weiter, gezählt ab 1. :nth-child(3) ist das dritte Kind, :nth-child(odd) oder 2n+1 jedes ungerade und :nth-child(n+4) das vierte und alle danach.

Was ist der Unterschied zwischen nth-child und nth-of-type?

:nth-child() zählt alle Geschwisterelemente und prüft danach den Rest des Selektors; :nth-of-type() zählt nur Geschwister desselben Elementtyps. In einer Folge aus einem h2 und mehreren Absätzen trifft p:nth-child(1) nichts, während p:nth-of-type(1) den ersten Absatz trifft.

Wie verwendet man :not() in CSS?

Schreib den auszuschließenden Selektor in die Klammern: li:not(.done) trifft jeden Listeneintrag ohne die Klasse done. Es nimmt auch eine Liste an, input:not([type="checkbox"], [type="radio"]).

Was ist der Unterschied zwischen einer Pseudoklasse und einem Pseudoelement?

Eine Pseudoklasse (ein Doppelpunkt, :hover) wählt ein ganzes vorhandenes Element in einem bestimmten Zustand aus. Ein Pseudoelement (zwei Doppelpunkte, ::before) zielt auf einen Teil eines Elements oder erzeugt generierten Inhalt.

Verwandte Konzepte