:: seleção - CSS-Tricks | CSS Almanac 2025

Usando o cursor, selecione esta frase. Observe como, conforme você seleciona o texto, uma cor de fundo preenche o espaço? Você pode alterar a cor de fundo e a cor do texto selecionado definindo o estilo ::selection. Definir o estilo desse pseudo elemento é ótimo para combinar o texto selecionado pelo usuário com o esquema de cores do seu site.

p::-moz-selection ( color: red) p::selection ( color: red; )

Observe que os dois pontos duplos são necessários na sintaxe para este pseudo elemento, apesar de outros pseudo elementos aceitarem um único dois pontos.

Como visto acima, você pode estilizar ::selectionem elementos individuais. Você também pode estilizar a página inteira soltando o pseudo elemento vazio em sua folha de estilo.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Existem apenas três propriedades que ::selectionfuncionam com:

color
background( background-color, background-image)
text-shadow

Veja os testes Pen :: selection por Chris Coyier (@chriscoyier) no CodePen.

Se você tentar estilizar ::selectioncom uma propriedade que não está na lista, essa propriedade será ignorada. Pode ser complicado ver backgroundessa lista porque a propriedade só renderizará uma cor quando usada em ::selectione não renderizará uma imagem de fundo ou gradiente.

Também não tente isso:

p::-moz-selection, p::selection ( color: red; )

Quando os navegadores encontram uma parte de uma seleção que não entendem, eles descartam a coisa inteira, então isso irá falhar o tempo todo.

Um dos usos mais úteis ::selectioné desligar o text-shadowdurante a seleção. Um text-shadowpode conflitar com a cor de fundo da seleção e dificultar a leitura do texto. Defina text-shadow: none;para tornar o texto claro e fácil de ler durante a seleção.

Veja Pen :: selection text-shadow de Chris Coyier (@chriscoyier) no CodePen.

Fantasia :: seleção

Emparelhado com o Sass, ou qualquer outro pré-processador, você pode fazer efeitos realmente legais ::selection. Selecione o texto na demonstração abaixo:

Você pode notar que o efeito não é tão suave em alguns navegadores. Vamos arquivar essa demonstração em: coisas que são possíveis, mas provavelmente apenas por diversão.

Outro truque idiota, mas divertido, é revelar uma imagem por meio do texto selecionado.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.