::selection

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

O 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.

css

::selection {
  background-color: cyan;
}

Propriedades permitidas

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

color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color
text-shadow

Aviso: Em particular, background-image é ignorada.

Sintaxe

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

Error: could not find syntax for this item

Exemplo

HTML

html

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

CSS

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

p::-moz-selection {
  color: white;
  background-color: blue;
}

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

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

Specification
CSS Pseudo-Elements Module Level 4 # selectordef-selection

Compatibilidade com navegadores

BCD tables only load in the browser

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.