---
title: '::selection'
slug: 'Web/CSS/::selection'
tags:
  - CSS
  - CSS Pseudoelement
  - Layout
  - Referenz
  - Web
translation_of: 'Web/CSS/::selection'
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Das <code>::selection</code> <a href="/de/docs/Web/CSS">CSS</a> Pseudoelement weist dem durch den Benutzer ausgewählten Bereich (z. B. mit der Maus oder einem anderen Zeigegerät) eines Dokuments Regeln zu.</p>

<p>Nur ein kleiner Teil der CSS Eigenschaften kann innerhalb einer Regel benutzt werden, die <code>::selection</code> in ihrem Selektor verwendet: {{cssxref("color")}}, {{cssxref("background")}}, {{cssxref("background-color")}} und {{cssxref("text-shadow")}}. Zu beachten ist insbesondere, dass {{cssxref("background-image")}} ignoriert wird, sowie alle anderen Eigenschaften.</p>

<div class="note">
<p>{{cssxref("text-shadow")}} in <code>::selection</code> wird von Chrome, Safari und Firefox 17+ unterstützt.</p>
</div>

<p class="note">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 <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(auf Grundlage einer Diskussion in der W3C Style Mailingliste)</a>.<br>
 <br>
 Das <code>::selection</code> Pseudoelement wurde in <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a> wieder hinzugefügt.</p>

<h2 id="Beispiel">Beispiel</h2>

<p>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: <code>::-moz-selection, ::selection {...}</code>. Die Regel würde von nicht-Gecko Browsern verworfen werden, da <code>::-moz-selection</code> für sie ungültig ist.</p>

<h4 id="HTML">HTML</h4>

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

<h4 id="CSS">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Output">Output</h4>

<p>{{EmbedLiveSample('Beispiel')}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.selectors.selection")}}</p>