Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >::selection

::selection

Selektor::selection

Wählt den Teil des Dokuments, den der Nutzer markiert hat (mit der Maus, dem Finger oder der Tastatur). Es eignet sich, um die Farbe der Markierung an die Farben der Website anzupassen. Ohne Selektor vor den Doppelpunkten gilt es für die ganze Seite.

Werte

Verwenden lassen sich nur color, background-color, text-shadow, text-decoration (nur Chrome ab 105), die Farben von -webkit-text-stroke und die Textfüllung.

Beispiele

Textmarkierung in den Farben der Website, in Codebeispielen dunkler:

::selection {
  background-color: #b3e5fc;
  color: #01579b;
}
pre::selection,
pre ::selection {
  background-color: #01579b;
  color: #fff;
}

Das Ergebnis: Markierter Text hat einen hellblauen Hintergrund und dunkelblaue Buchstaben, in Codeblöcken weiße Buchstaben auf Dunkelblau.

Worauf Sie achten sollten

  • Die Farbe der Markierung und der Text brauchen genug Kontrast (4,5 : 1). Nutzer kennen die Standardfarben des Systems – ändern Sie sie mit Bedacht.
  • Firefox vor Version 62 kannte nur ::-moz-selection. Schreiben Sie die alte Form nicht in eine Liste mit ::selection – ein anderer Browser würde die ganze Regel verwerfen.
  • Laut MDN verwendet Safari auf iPhone und iPad ::selection nicht (Stand Oktober 2026); auch deshalb führt MDN das Pseudoelement nicht als Baseline.
  • Text, bei dem user-select: none es verbietet, lässt sich nicht markieren.

Browserunterstützung

Noch nicht Baseline: funktioniert noch nicht in allen gängigen Browsern (ohne Präfix). Ab Version: Chrome 1, Firefox 62, Safari 1.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
user-select
color
background-color
::placeholder