CSS/Selektoren/Pseudoelement/selection

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem Pseudoelement ::selection kann die Vorder- und Hintergrundfarbe von ausgewählten Elementen (z.B. markiertem Text) bestimmt werden.

  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel 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: Formatieren Sie 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.

Dieses Pseudoelement gehört nicht zum CSS-Standard, obwohl es ursprünglich dafür vorgesehen war.[1] Aufgrund des nicht hinreichend definierten Verhaltens wurde das Element jedoch aus der CSS3-Empfehlung entfernt.

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.

Hinweis

Der Einsatz des Pseudoelements ::selection sollte aufgrund des nicht definierten Verhaltens stets gut überlegt werden. Empfehlenswert ist der Verzicht, so lange kein detailliertes Verhalten standardisiert wird.

Quellen[Bearbeiten]

  1. W3C: css3-selectors#selection