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

<p><span class="seoSummary">O <a href="pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> CSS <strong><code>::selection</code></strong> aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.</span></p>

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

<h2 id="Propriedades_permitidas">Propriedades permitidas</h2>

<p>Apenas certas propriedades podem ser usadas com o <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")}} and its longhands</li>
 <li>{{CSSxRef("text-decoration")}} and its associated properties</li>
 <li>{{CSSxRef("text-emphasis-color")}}</li>
 <li>{{CSSxRef("text-shadow")}}</li>
</ul>

<div class="warning">
<p>Em particular, {{CSSxRef("background-image")}} é ignorada.</p>
</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox notranslate">/* Sintaxe legado do Firefox (até a versão 61) */
::-moz-selection

{{CSSSyntax}}
</pre>

<h2 id="Exemplo">Exemplo</h2>

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

<pre class="brush: html notranslate">Esse texto tem estilos especiais quando selecionado.
&lt;p&gt;Tente selecionando também o texto nesse parágrafo.&lt;/p&gt;</pre>

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

<div class="hidden">
<pre class="brush: css notranslate">::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}</pre>
</div>

<pre class="brush: css notranslate">/* Texto selecionado dourado com o fundo vermelho */
::selection {
  color: gold;
  background-color: red;
}

/* Texto selecionado branco com o fundo azul */
p::selection {
  color: white;
  background-color: blue;
}</pre>

<h3 id="Resultado">Resultado</h3>

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

<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2>

<p><strong>Não substitua os estilos de texto selecionados por razões puramente estéticas</strong> — os usuários podem personalizá-los para atender às suas necessidades. Para pessoas com problemas cognitivos ou com menos conhecimento tecnológico, alterações inesperadas nos estilos de seleção podem prejudicar sua compreensão da funcionalidade.</p>

<p>Se substituído, é importante garantir que a <strong>taxa de contraste</strong> entre o texto e as cores de plano de fundo da seleção seja alta o suficiente para que pessoas com condições de baixa visão possam lê-lo.</p>

<p>A taxa de contraste da cor é encontrada comparando a luminosidade do texto selecionado e as cores de fundo do texto selecionado. Para atender às atuais <a href="https://www.w3.org/WAI/intro/wcag">Diretrizes de acessibilidade de conteúdo da Web (WCAG)</a>, o conteúdo de texto deve ter uma taxa de contraste de 4.5:1 ou 3:1 para texto maior, como títulos. (WCAG define texto grande entre 18,66 px e 24 px e negrito, ou 24 px ou maior.)</p>

<p>Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Verificador de Constraste de Cor</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG,1.4: Facilite para os usuários vizualizarem o conteúdo, incluindo a separação do primeiro plano do segundo plano (em inglês).</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota:</strong> <code>::selection</code> estava nos rascunhos do Nível 3 dos Seletores de CSS, mas foi removido na fase Recomendação do Candidato porque estava subespecificado (especialmente com elementos aninhados) e a interoperabilidade não foi alcançada (<a href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">com base na lista de discussão de estilos W3C</a>). Ele retornou no <a href="http://dev.w3.org/csswg/css-pseudo-4/">Nível 4 dos Pseudo-Elementos</a>.</p>
</div>

<h2 id="Compatibilidade">Compatibilidade</h2>

<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>

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

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>
  <p>{{cssxref("pointer-events")}} - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.</p>
 </li>
</ul>