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 …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für das ::selection-Pseudoelement</title> <style> body {color: black; background-color: white;} ::selection {color: white; background-color: black;} </style> </head> <body> <p>Markieren Sie Text in diesem Absatz, um die Wirkung des ::selection-Pseudoelements sichtbar zu machen.</p> </body> </html>
In diesem Beispiel wurde das selection-Pseudoelement so formatiert, dass Vorder- und Hintergrundfarbe des normalen Textes umgekehrt werden. Wird der Text markiert, wird die Schriftfarbe weiß, die Hintergrundfarbe schwarz dargestellt.

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.

Achtung!

Für Firefox ist die proprietäre Eigenschaft ::-moz-selection verfügbar:

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.

Größere Unterschiede zeigen sich, wenn das Pseudoelement nur einem bestimmten Element zugewiesen wird, da die Formatierung der Kindelemente unterschiedlich gehandhabt wird.

Im Firefox, Safari und Chrome werden Kindelemente durch das Pseudoelement nicht beeinflusst. In Opera dagegen schon. In aktuellen Entwicklerversionen des Internet Explorers wird nur die definierte Schriftfarbe angewendet, wodurch unter Umständen der Text unlesbar wird.

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.