Übersicht

Das ::selection CSS Pseudoelement weist dem durch den Benutzer ausgewählten Bereich (z. B. mit der Maus oder einem anderen Zeigegerät) eines Dokuments Regeln zu.

Nur ein kleiner Teil der CSS Eigenschaften kann innerhalb einer Regel benutzt werden, die ::selection in ihrem Selektor verwendet: color, background, background-color und text-shadow. Zu beachten ist insbesondere, dass background-image ignoriert wird, sowie alle anderen Eigenschaften.

text-shadow in ::selection wird von Chrome, Safari und Firefox 17+ unterstützt.

Obwohl dieses Pseudoelement in Entwürfen von CSS Selektoren Level 3 war, wurde es während der Candidate Recommendation Phase entfernt, da sein Verhalten nicht genau definiert erschien, besonders in Beziehung zu verschachtelten Elementen, und Interoperabilität war nicht gegeben (auf Grundlage einer Diskussion in der W3C Style Mailingliste).

Das ::selection Pseudoelement wurde in Pseudo-Elements Level 4 wieder hinzugefügt.

Beispiel

Gecko ist die einzige Engine, die einen Präfix benötigt. Dadurch, dass die CSS Parsingregeln verlangen, dass die gesamte Regel verworfen wird, falls ein ungültiges Pseudoelement gefunden wird, müssen zwei separate Regeln geschrieben werden: ::-moz-selection, ::selection {...}. Die Regel würde von nicht-Gecko Browsern verworfen werden, da ::-moz-selection für sie ungültig ist.

HTML

<div>Dies ist etwas Text für dich, um CSS' ::selection Pseudoklasse zu testen.</div>
<p>Versuche auch, etwas Text in diesem &lt;p&gt;</p> zu markieren

CSS

/* Zeichnet jeden markierten Text gelb auf rotem Hintergrund */
::-moz-selection {
  color: gold; background: red;
}

::selection {
  color: gold; background: red;
} 

/* Zeichnet markierten Text innerhalb von Absätzen weiß auf schwarz */
p::-moz-selection {
  color: white;
  background: black;
}

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

Output

Spezifikationen

Spezifikation Status Kommentar
CSS Pseudo-Elements Level 4
Die Definition von '::selection' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Das ::selection CSS Pseudoelement wurde für CSS Selectors Level 3 entworfen, aber entfernt bevor die Spezifikation Empfehlungsstatus erreicht hat. Es wurde als Teil des Pseudo-Elements Level 4 Entwurfs wieder hinzugefügt.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende Unterstützung
Experimentell
Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 62
Vollständige Unterstützung 62
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 1.1WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Sebastianz, iGadget
Zuletzt aktualisiert von: SJW,