1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
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.
<p>Tente selecionando também o texto nesse parágrafo.</p></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>
|
