---
title: '::selection'
slug: 'Web/CSS/::selection'
tags:
  - CSS
  - Pseudo-element
  - Reference
translation_of: 'Web/CSS/::selection'
---
<div>{{CSSRef}}</div>

<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p>

<pre class="brush: css no-line-numbers">::selection {
  background-color: cyan;
}</pre>

<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>

<p>Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient <code>::selection</code> :</p>

<ul>
 <li>{{cssxref("color")}},</li>
 <li>{{cssxref("background-color")}},</li>
 <li>{{cssxref("cursor")}},</li>
 <li>{{cssxref("caret-color")}},</li>
 <li>{{cssxref("outline")}} ainsi que les propriétés détaillées associées,</li>
 <li>{{cssxref("text-decoration")}} ainsi que les propriétés détaillées associées,</li>
 <li>{{cssxref("text-emphasis-color")}},</li>
 <li>{{cssxref("text-shadow")}}.</li>
</ul>

<p>On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">/*Syntaxe propre à Firefox (61 et antérieur) */
::-moz-selection
{{csssyntax}}
</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">/* du texte sélectionné sera jaune sur fond rouge */
::-moz-selection {
  color: gold;
  background-color: red;
}

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

/* le texte sélectionné dans un paragraphe */
/* sera blanc sur noir                     */
p::-moz-selection {
  color: white;
  background-color: black;
}

p::selection {
  color: white;
  background-color: black;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;Un peu de texte pour tester ::selection.&lt;/div&gt;
&lt;p&gt;Essayez également de sélectionner du texte dans ce &amp;lt;p&amp;gt;&lt;/p&gt;</pre>

<h3 id="Résultat">Résultat</h3>

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

<h2 id="Accessibilité">Accessibilité</h2>

<p>Il est recommandé de <strong>ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques</strong> et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.</p>

<p>Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.</p>

<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>

<ul>
 <li>Si le texte est en gras : 18.66px ou plus grand</li>
 <li>Sinon 24px ou plus grand</li>
</ul>

<p>Quelques ressources :</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note : </strong>Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.<br>
 <br>
 Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p>
</div>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

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

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("pointer-events")}} qui contrôle les évènements actifs sur l'élément</li>
</ul>