CSS mit Adi Prinz

Weitere wichtige Pseudoklassen

Neben den bereits behandelten Pseudoklassen gibt es weitere Pseudoklassen für besondere Anwendungsbereiche. Dazu gehören Sprungziele, das Wurzelelement, Spracheinstellungen, benutzerdefinierte Elemente und der Vollbildmodus.

Pseudoklasse	Bedeutung
`:target`	Wählt das Element aus, dessen `id` mit dem aktuellen Sprungziel in der URL übereinstimmt.
`:root`	Wählt das Wurzelelement des Dokuments aus. In HTML ist das gewöhnlich das `html`-Element.
`:lang()`	Wählt Elemente anhand ihrer festgelegten oder geerbten Sprache aus.
`:defined`	Wählt gewöhnliche HTML-Elemente und bereits registrierte benutzerdefinierte Elemente aus.
`:fullscreen`	Wählt ein Element aus, während es im Vollbildmodus dargestellt wird.

:target

Die Pseudoklasse :target wählt das Element aus, dessen id dem Fragmentbezeichner am Ende der aktuellen URL entspricht.

Eine URL kann beispielsweise folgendermaßen aussehen:

https://example.com/css.php#target-beispiel

Der Teil #target-beispiel verweist auf das Element mit id="target-beispiel".

HTML

HTML beschreibt die Struktur einer Webseite.

CSS

CSS gestaltet die Darstellung einer Webseite.

JavaScript

JavaScript ermöglicht dynamisches Verhalten.

.pseudo-target-box:target {
  border-color: #6f42c1;
  background-color: #f5f0ff;
}

Nach dem Anklicken eines Links wird das entsprechende Sprungziel hervorgehoben. Gleichzeitig wird dessen ID als Fragmentbezeichner in die URL übernommen.

Praktischer Einsatz

Hervorheben eines angesprungenen Abschnitts
Navigation innerhalb einer langen Seite
einfache Registerkarten ohne JavaScript
Aufklappen verlinkter Hinweise oder Hilfetexte

Hinweis: Wird kein Fragmentbezeichner angegeben, trifft :target auf keines dieser Elemente zu.

:root

:root wählt das Wurzelelement eines Dokuments aus. In einem HTML-Dokument ist das das html-Element.

:root {
  --primary-color: #6f42c1;
  --accent-color: #fd7e14;
  --success-color: #198754;
}

Die Pseudoklasse wird besonders häufig verwendet, um globale benutzerdefinierte CSS-Eigenschaften – sogenannte Custom Properties oder CSS-Variablen – zu definieren.

Beispiel mit CSS-Variablen

Die Farben dieses Bereichs werden über Variablen aus :root festgelegt.

:root {
  --example-color: #6f42c1;
  --example-background: #f5f0ff;
}

.pseudo-root-example {
  border-color: var(--example-color);
  background-color: var(--example-background);
}

Unterschied zwischen :root und html

Selektor	Bedeutung	Spezifität
`:root`	Wählt das Wurzelelement des Dokuments aus.	`0-1-0`
`html`	Wählt das HTML-Element anhand seines Elementnamens aus.	`0-0-1`

In HTML wählen beide Selektoren gewöhnlich dasselbe Element aus. :root besitzt jedoch eine höhere Spezifität als html.

:lang()

Mit :lang() werden Elemente anhand ihrer Sprache ausgewählt. Die Sprache kann direkt am Element festgelegt oder von einem übergeordneten Element geerbt werden.

Das ist ein deutscher Absatz.

This is an English paragraph.

Ceci est un paragraphe français.

.pseudo-lang-example p:lang(de) {
  border-left-color: #198754;
}

.pseudo-lang-example p:lang(en) {
  border-left-color: #0d6efd;
}

.pseudo-lang-example p:lang(fr) {
  border-left-color: #dc3545;
}

Die Sprache wird üblicherweise mit dem globalen Attribut lang angegeben.

<html lang="de">

<p lang="en">This paragraph is in English.</p>

Sprachvarianten auswählen

Eine allgemeine Sprachangabe kann auch regionale Sprachvarianten einschließen. Der Selektor :lang(de) kann beispielsweise auf de, de-AT oder de-DE zutreffen.

<p lang="de-AT">Österreichisches Deutsch</p>
<p lang="de-DE">Deutsches Deutsch</p>

Typografische Zeichen abhängig von der Sprache

Sprache beeinflusst auch typografische Zeichen.

Language can also affect typographic characters.

.pseudo-lang-quotes blockquote:lang(de) {
  quotes: "„" "“" "‚" "‘";
}

.pseudo-lang-quotes blockquote:lang(en) {
  quotes: "“" "”" "‘" "’";
}

.pseudo-lang-quotes blockquote::before {
  content: open-quote;
}

.pseudo-lang-quotes blockquote::after {
  content: close-quote;
}

:lang() ist besonders nützlich auf mehrsprachigen Webseiten, wenn sich Typografie oder Darstellung abhängig von der Sprache ändern soll.

:defined

Die Pseudoklasse :defined trifft auf alle gewöhnlichen HTML-Elemente zu. Bei selbst erstellten Custom Elements trifft sie erst zu, nachdem das Element mit JavaScript registriert wurde.

<course-card>
  Kurs: CSS-Pseudoklassen
</course-card>

Solange das Element <course-card> noch nicht registriert wurde, trifft :defined nicht darauf zu.

course-card:not(:defined) {
  display: block;
  min-height: 4rem;
  color: transparent;
  background-color: #e9ecef;
}

course-card:defined {
  display: block;
  padding: 1rem;
  border: 2px solid #6f42c1;
  background-color: #f5f0ff;
}

Die Registrierung kann mit JavaScript erfolgen:

class CourseCard extends HTMLElement {
  connectedCallback() {
    this.setAttribute("role", "article");
  }
}

customElements.define("course-card", CourseCard);

Nach der Ausführung von customElements.define() gilt das Element als definiert und kann mit :defined ausgewählt werden.

Darstellung vor der Registrierung

:not(:defined) kann verhindern, dass ein Custom Element während des Ladens kurz ungestaltet angezeigt wird:

course-card:not(:defined) {
  visibility: hidden;
}

Dabei muss beachtet werden, dass der Inhalt bis zur erfolgreichen Registrierung unsichtbar bleibt. Wenn JavaScript nicht geladen werden kann, sollte weiterhin eine sinnvolle Alternative verfügbar sein.

Wichtig: Bei Standard-HTML-Elementen wie p, button oder section trifft :defined immer zu.

:fullscreen

Die Pseudoklasse :fullscreen wählt ein Element aus, während es über die Fullscreen API im Vollbildmodus dargestellt wird.

Vollbildbeispiel

Dieser Bereich kann mit JavaScript in den Vollbildmodus versetzt werden.

.pseudo-fullscreen-example:fullscreen {
  display: grid;
  place-content: center;
  padding: 3rem;
  background-color: #212529;
  color: #fff;
}

Das Element selbst wird mit :fullscreen ausgewählt. Dadurch können Größe, Ausrichtung, Hintergrundfarbe oder andere Eigenschaften speziell für den Vollbildmodus angepasst werden.

Vollbildmodus mit JavaScript starten

const fullscreenBox = document.getElementById("fullscreen-example");
const fullscreenButton = document.getElementById("fullscreen-button");

fullscreenButton.addEventListener("click", async () => {
  if (!document.fullscreenElement) {
    await fullscreenBox.requestFullscreen();
  } else {
    await document.exitFullscreen();
  }
});

Der Vollbildmodus muss normalerweise durch eine bewusste Benutzeraktion, beispielsweise einen Klick, gestartet werden.

Vollbildmodus wieder verlassen

document.exitFullscreen();

Benutzer können den Vollbildmodus außerdem gewöhnlich mit der Esc-Taste verlassen.

Hinweis: Die Fullscreen API kann durch Browsereinstellungen, eingebettete Seiten oder Sicherheitsregeln eingeschränkt sein. Das Beispiel sollte deshalb Fehler mit try...catch behandeln.

Weitere Pseudoklassen im Vergleich

Pseudoklasse	Auswahlkriterium	Typischer Einsatz
`:target`	Fragmentbezeichner der URL	Angesprungene Abschnitte hervorheben
`:root`	Wurzelelement des Dokuments	Globale CSS-Variablen definieren
`:lang()`	Sprache eines Elements	Sprachabhängige Typografie
`:defined`	Registrierungsstatus eines Elements	Custom Elements gestalten
`:fullscreen`	Aktiver Vollbildmodus	Vollbilddarstellung anpassen

Pseudoklassen im Überblick

Pseudoklassen wählen Elemente anhand ihres Zustands, ihrer Position, ihrer Eigenschaften oder ihrer Beziehung zu anderen Elementen aus. Sie werden mit einem Doppelpunkt hinter den eigentlichen Selektor geschrieben.

selektor:pseudoklasse {
  eigenschaft: wert;
}

Ein einfaches Beispiel:

a:hover {
  color: #dc3545;
}

Der Selektor wählt einen Link aus, während sich der Mauszeiger darüber befindet.

Nachschlagetabelle

Kategorie	Pseudoklasse	Bedeutung	Beispiel
Links und Benutzeraktionen	`:link`	Wählt noch nicht besuchte Links aus.	`a:link`
	`:visited`	Wählt bereits besuchte Links aus.	`a:visited`
	`:hover`	Wählt ein Element aus, während sich der Mauszeiger darüber befindet.	`button:hover`
	`:active`	Wählt ein Element aus, während es gerade aktiviert wird.	`button:active`
	`:focus`	Wählt ein Element aus, das den Fokus besitzt.	`input:focus`
Fokus	`:focus-visible`	Wählt ein fokussiertes Element aus, wenn eine sichtbare Fokusmarkierung erforderlich ist.	`button:focus-visible`
Fokus	`:focus-within`	Wählt ein Element aus, wenn es selbst oder eines seiner untergeordneten Elemente den Fokus besitzt.	`form:focus-within`
Formulare	`:enabled`	Wählt aktivierte Formularelemente aus.	`input:enabled`
	`:disabled`	Wählt deaktivierte Formularelemente aus.	`button:disabled`
	`:checked`	Wählt ausgewählte Kontrollkästchen, Optionsfelder oder Optionen aus.	`input:checked`
	`:indeterminate`	Wählt Formularelemente mit einem unbestimmten Zustand aus.	`input:indeterminate`
	`:required`	Wählt Pflichtfelder aus.	`input:required`
	`:optional`	Wählt optionale Eingabefelder aus.	`input:optional`
	`:valid`	Wählt gültig ausgefüllte Eingabefelder aus.	`input:valid`
	`:invalid`	Wählt ungültig ausgefüllte Eingabefelder aus.	`input:invalid`
	`:in-range`	Wählt Eingabefelder aus, deren Wert innerhalb des erlaubten Bereichs liegt.	`input:in-range`
	`:out-of-range`	Wählt Eingabefelder aus, deren Wert außerhalb des erlaubten Bereichs liegt.	`input:out-of-range`
Struktur	`:first-child`	Wählt ein Element aus, wenn es das erste Kind seines Elternelements ist.	`li:first-child`
	`:last-child`	Wählt ein Element aus, wenn es das letzte Kind seines Elternelements ist.	`li:last-child`
	`:only-child`	Wählt ein Element aus, wenn es das einzige Kind seines Elternelements ist.	`p:only-child`
	`:nth-child()`	Wählt Elemente anhand ihrer Position innerhalb aller Geschwisterelemente aus.	`li:nth-child(2n)`
	`:nth-last-child()`	Funktioniert wie `:nth-child()`, zählt jedoch vom Ende.	`li:nth-last-child(2)`
	`:first-of-type`	Wählt das erste Geschwisterelement eines bestimmten Elementtyps aus.	`p:first-of-type`
	`:last-of-type`	Wählt das letzte Geschwisterelement eines bestimmten Elementtyps aus.	`p:last-of-type`
	`:nth-of-type()`	Wählt Elemente anhand ihrer Position unter Geschwistern desselben Elementtyps aus.	`p:nth-of-type(2)`
Inhalt	`:only-of-type`	Wählt ein Element aus, wenn es das einzige Geschwisterelement dieses Typs ist.	`p:only-of-type`
Inhalt	`:empty`	Wählt Elemente ohne untergeordnete Elemente und ohne Textinhalt aus.	`p:empty`
Funktionale Pseudoklassen	`:not()`	Schließt bestimmte Elemente von einer Auswahl aus.	`li:not(.active)`
	`:is()`	Fasst alternative Selektoren kompakt zusammen.	`:is(h2, h3, h4)`
	`:where()`	Fasst Selektoren zusammen, ohne die Spezifität zu erhöhen.	`:where(header, main) a`
	`:has()`	Wählt Elemente abhängig von enthaltenen oder verbundenen Elementen aus.	`.card:has(img)`
Weitere Pseudoklassen	`:target`	Wählt das aktuelle Sprungziel der URL aus.	`section:target`
	`:root`	Wählt das Wurzelelement des Dokuments aus.	`:root`
	`:lang()`	Wählt Elemente anhand ihrer Sprache aus.	`p:lang(de)`
	`:defined`	Wählt Standard-HTML-Elemente und registrierte Custom Elements aus.	`course-card:defined`
	`:fullscreen`	Wählt ein Element aus, das im Vollbildmodus dargestellt wird.	`.video:fullscreen`

Pseudoklassen kombinieren

Mehrere Pseudoklassen können miteinander kombiniert werden. Das Element muss dann alle angegebenen Bedingungen gleichzeitig erfüllen.

input:required:invalid {
  border-color: #dc3545;
}

Ausgewählt werden nur Eingabefelder, die Pflichtfelder sind und gleichzeitig einen ungültigen Wert enthalten.

button:not(:disabled):hover {
  background-color: #6f42c1;
  color: #fff;
}

Der Hoverstil wird nur auf Schaltflächen angewendet, die nicht deaktiviert sind.

li:nth-child(odd):not(.active) {
  background-color: #f5f0ff;
}

Dieser Selektor wählt ungerade Listenelemente aus, sofern sie nicht die Klasse .active besitzen.

Reihenfolge bei Link-Pseudoklassen

Werden die vier klassischen Linkzustände gemeinsam verwendet, sollte ihre Reihenfolge im Stylesheet beachtet werden:

a:link {
  color: #0d6efd;
}

a:visited {
  color: #6f42c1;
}

a:hover {
  color: #dc3545;
}

a:active {
  color: #fd7e14;
}

Als Merkhilfe kann die Reihenfolge Link – Visited – Hover – Active verwendet werden.

Pseudoklassen und Pseudoelemente unterscheiden

Merkmal	Pseudoklasse	Pseudoelement
Schreibweise	Ein Doppelpunkt: `:`	Zwei Doppelpunkte: `::`
Aufgabe	Wählt ein vorhandenes Element anhand eines Zustands oder einer Bedingung aus.	Wählt einen bestimmten Teil eines Elements aus oder erzeugt einen stilisierbaren Bereich.
Beispiel	`a:hover`	`p::first-line`

a:hover {
  color: #dc3545;
}

p::first-line {
  font-weight: 700;
}

:hover beschreibt einen Zustand des Links. ::first-line wählt dagegen die erste dargestellte Zeile eines Absatzes aus.

Zusammenfassung

Pseudoklassen beginnen mit einem Doppelpunkt, beispielsweise :hover.
Sie wählen Elemente anhand eines Zustands, einer Position oder einer Bedingung aus.
Mehrere Pseudoklassen können miteinander kombiniert werden.
Funktionale Pseudoklassen besitzen Argumente in runden Klammern.
:is(), :not() und :has() übernehmen die Spezifität ihres spezifischsten Arguments.
:where() besitzt unabhängig von seinem Inhalt immer die Spezifität 0-0-0.
Pseudoelemente werden in der modernen Schreibweise mit zwei Doppelpunkten geschrieben.

Weitere PK

CSS Module

css mit Adi Prinz