CSS/Selektoren/selection

Browserunterstützung
caniuse.com

Der ::selection-Selektor bestimmt die Vorder- und Hintergrundfarbe von ausgewählten Elementen (z. B. markiertem Text)

Syntax

::selection

Beispiel

::selection {
  color: white; 
  background-color: black;
}

Wird der Text markiert, wird die Schriftfarbe weiß, die Hintergrundfarbe schwarz dargestellt.

Siehe auch

• Selektoren in CSS/Pseudoelemente

Weblinks

• W3C: The ::selection pseudo-element CSS Pseudo-Elements Module Level 4
• MDN: ::selection
• Browser-Support: caniuse.com

Anwendungsbeispiel

Auswahl von Text ansehen …

p.selection::selection {
  color: black;
  background-color: gold;
}

<h2>Browsereinstellung</h2>
<p>Markieren Sie Text in diesem Absatz, ...</p>
<h2>eigene Vorgaben</h2>
<p class="selection">Für diesen Absatz gelten Vorgaben des Autorenstylesheets.</p>

In diesem Beispiel wurde das selection-Pseudoelement so formatiert, dass die Schriftfarbe schwarz bleibt, die Hintergrundfarbe jedoch auf gold gesetzt wird. Zugleich wird der Unterschied zu den Browser-Einstellungen sichtbar.

Auf das selection-Pseudoelement können lediglich Vordergrund- und Hintergrundfarbe angewendet werden.

Empfehlung: Formatiere das selection-Pseudoelement immer so, dass einerseits der Kontrast zu nicht markiertem Text, andererseits der Kontrast zwischen Schrift- und Hintergrundfarbe stark genug ist, damit keine Beeinträchtigung der Benutzbarkeit entsteht.

Das Verhalten der einzelnen Browser ist teilweise sehr unterschiedlich. Safari und Chrome markieren neben der eigentlichen Auswahl auch die leeren Räume zwischen den Elementen, formatieren dabei aber nur die tatsächlich vorhandenen Elemente mit der selection-Definition.