::selection

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

pseudo-elemento CSS ::selection 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.

::selection {
  background-color: cyan;
}

Propriedades permitidas

Apenas certas propriedades podem ser usadas com o ::selection:

Em particular, background-image é ignorada.

Sintaxe

/* Sintaxe legado do Firefox (até a versão 61) */
::-moz-selection

::selection

Exemplo

HTML

Esse texto tem estilos especiais quando selecionado.
<p>Tente selecionando também o texto nesse parágrafo.</p>

CSS

/* 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;
}

Resultado

Preocupações com acessibilidade

Não substitua os estilos de texto selecionados por razões puramente estéticas — 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.

Se substituído, é importante garantir que a taxa de contraste 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.

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 Diretrizes de acessibilidade de conteúdo da Web (WCAG), 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.)

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

Especificações

Especificações Status Comentário
CSS Pseudo-Elements Level 4
The definition of '::selection' in that specification.
Rascunho atual Definição inicial.

Nota: ::selection 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 (com base na lista de discussão de estilos W3C). Ele retornou no Nível 4 dos Pseudo-Elementos.

Compatibilidade

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::selectionChrome Full support 1Edge Full support 12Firefox Full support 62
Full support 62
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9Opera Full support 9.5Safari Full support 1.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 62
Full support 62
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também

  • pointer-events - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.