Logische Pseudoklassen

Logische Pseudoklassen wählen Elemente unter bestimmten Bedingungen aus. Sie können Selektoren ausschliessen, zusammenfassen oder Beziehungen zwischen Elementen prüfen.

Pseudoklassen im Überblick

:not()schliesst Elemente aus
:is()fasst mehrere Selektoren zusammen
:where()funktioniert wie :is(), hat aber Spezifität 0
:has()wählt ein Element abhängig von seinem Inhalt oder Umfeld

1. :not() – ausschliessen

:not() ist eine Negations-Pseudoklasse. Sie wählt zuerst die Elemente aus, die vor :not() stehen, und schliesst anschliessend jene aus, auf die der Selektor in der Klammer zutrifft. So lassen sich gezielt Ausnahmen definieren.

Standard Ausnahme Standard

So wird der Selektor gelesen: Wähle alle span, die nicht die Klasse .ausnahme haben.

.not-demo span:not(.ausnahme) {
    border: 2px solid magenta;
}

In :not() können auch mehrere Ausschlüsse stehen.

p:not(.intro, .highlight) {
    color: gray;
}

2. :is() – zusammenfassen

Mit :is() lassen sich mehrere alternative Selektoren in einer Klammer zusammenfassen. Das verhindert Wiederholungen, besonders bei längeren oder verschachtelten Selektoren, ohne die Auswahl der Elemente zu verändern.

Titel im Header

Absatz im Header

header h4,
header p,
footer h4,
footer p {
    color: gold;
}

Mit :is() lässt sich dieselbe Auswahl kürzer schreiben:

:is(header, footer) :is(h4, p) {
    color: rebeccapurple;
}

So wird der Selektor gelesen: Alle h4- und p-Elemente innerhalb eines header- oder footer-Elements werden ausgewählt.

3. :where() – leicht überschreibbar

:where() funktioniert bei der Auswahl wie :is(). Die Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln dasselbe Element gestalten. :where() hat immer die Spezifität 0 und lässt sich deshalb leicht durch andere Selektoren überschreiben.

Ich werde blau

Die graue Regel mit :where() steht im CSS später. Trotzdem gewinnt die normale Klassenregel.

.where-title {
    color: blue;
}

/* steht später, ist aber weniger spezifisch */
:where(.where-title) {
    color: gray;
}

Die geringe Spezifität ist praktisch für Basis-Styles und wiederverwendbare Module, die sich später leicht überschreiben lassen sollen.

4. :has() – Beziehungen prüfen

:has() wählt ein Element aus, wenn die Bedingung in der Klammer erfüllt ist. Dabei kann geprüft werden, ob sich innerhalb des Elements ein bestimmtes Kindelement befindet oder ob ein bestimmtes Element darauf folgt. Ausgewählt und gestaltet wird immer das Element vor :has().

Card ohne Bild

Diese Card erfüllt die Bedingung nicht.

Card mit Bild

Diese Card erhält einen magentafarbenen Rahmen.

Gestaltet wird die .card vor :has(). Das img in der Klammer ist nur die Bedingung.

.card:has(img) {
    border-color: magenta;
}

So wird der Selektor gelesen: Wähle jede .card, die ein img enthält.

Eine Klasse als Bedingung

Die normale Karte ist blau. Enthält sie ein Element mit der Klasse .neu, werden Rahmen und Hintergrund magenta beziehungsweise rosa dargestellt.

Normaler Beitrag

Dies ist ein alter Text.

Neu!

Aktion des Monats

Dies ist ein aktueller Beitrag.

.karte {
    border: 2px solid blue;
    background: lightblue;
    color: #000;
}

.karte:has(.neu) {
    border-color: magenta;
    background: pink;
}

Beispiele

1. p + img und p:has(+ img)

Beide Selektoren beschreiben dieselbe Nachbarschaft: Ein Bild folgt direkt auf einen Absatz. Sie wählen aber unterschiedliche Elemente aus.

`p + img`

Ich stehe vor einem Bild.

`p:has(+ img)`