Cor de seleção CSS
Sintaxe
:: Seleção// Declaração CSS
Exemplo # 1: Alterar a cor do texto na seleção
Devemos escrever algum código HTML para modificar a cor ou a cor de fundo do texto quando o texto é selecionado. Aqui, para realizar esses exemplos, estamos usando o código do Visual Studio. Como resultado, abrimos o novo arquivo neste software e escolhemos o idioma "HTML", resultando em um arquivo html. Então começamos a codificar neste arquivo. Em nosso arquivo html, estamos criando um "div" chamado "d1", e depois temos um título e um parágrafo neste "div", como mostrado abaixo. Agora, nosso foco está em alterar a cor do texto selecionado usando o seletor de "seleção"; portanto, para isso, vamos mudar para o código CSS, onde usamos esse seletor de "seleção" e verificará o trabalho na saída.
Estamos utilizando o seletor de "seleção" aqui, assim como algumas mudanças na cor do texto. Vamos seguir a sintaxe deste seletor de “seleção”, e aqui você pode ver que usamos dois pontos antes do seletor de seleção e colocamos “H1” no início, pois queremos aplicar a cor dada no título quando o O texto do cabeçalho é selecionado pelo usuário. Aqui, estamos usando "H1" e depois coloque dois dois pontos "::" e depois disso, estamos usando "seleção".
Agora, dentro disso, usamos a propriedade do CSS, que é a propriedade "cor", e essa propriedade mudará a cor do texto quando for selecionado. Então, estamos mudando o texto selecionado "cor" para "azul" para o título 1. Após esse título, também temos um parágrafo, então também queremos mudar a "cor" do texto do parágrafo na seleção. Estamos colocando "P" aqui e novamente utilizamos o seletor de "seleção" para alterar o texto da cor para uma cor "vermelha" quando for selecionado.
Vamos verificar como funciona e a cor do texto muda na seleção nas saídas abaixo. Na primeira saída, você pode ver que a cor do texto selecionada do cabeçalho aparece azul à medida que o definimos no seletor de seleção acima no código CSS.
Agora vem a segunda saída e aqui você pode ver a cor do texto de parágrafo selecionado que aparece "vermelho" aqui. O texto preto é convertido em vermelho quando selecionamos o texto deste parágrafo.
Exemplo # 2: Alterando a cor de fundo do texto na seleção
Usamos o mesmo código HTML neste exemplo, mas aqui no CSS, vamos mudar a cor do fundo do texto quando ele for selecionado. Vamos usar o seletor de "seleção" neste exemplo também.
Usamos "H1" e depois colocamos "::" e o seletor de "seleção". Como, aqui, devemos alterar a cor de fundo do texto na seleção, por isso estamos usando a propriedade “Background-Color” aqui. Quando usamos essa propriedade dentro do seletor de seleção, ela altera a cor de fundo do texto de acordo com a cor que selecionamos aqui. No código, você pode ver que usamos "amarelo" como a cor de fundo do texto selecionado para o cabeçalho. Então vamos mudar a cor de fundo do texto do parágrafo. Então, utilizamos novamente o seletor de "seleção" com "P" e declaramos a propriedade "cor de fundo" e escolhemos a cor "cinza" para o fundo de texto deste parágrafo.
A cor de fundo do texto do cabeçalho é vista aqui na saída abaixo. Quando selecionamos o cabeçalho, a cor do fundo muda de branco para amarelo. Essa mudança é apenas por causa do seletor de "seleção" que usamos.
A mudança na cor de fundo do texto selecionada no parágrafo é mostrada abaixo e você pode notar que sua cor de fundo muda para uma cor "cinza" quando este texto é selecionado.
Exemplo # 3
Aqui, fizemos um título, um parágrafo e uma div neste exemplo e aplicaremos a mesma cor de fundo e a cor do texto quando selecionamos qualquer texto de todos esses.
Neste exemplo, não demos nenhum nome de seletor antes do cólon duplo “::” do seletor de “seleção” porque queremos dar a mesma cor de texto e cor de fundo a todos esses textos quando é selecionado, seja um título ou um parágrafo. Simplesmente colocamos o seletor "::" e "seleção" e depois usamos duas propriedades aqui.
A saída mostra que ambas as cores mudam na seleção do texto. A cor do fundo parece amarela e a cor do texto parece vermelha quando selecionamos o texto. Além disso, o mesmo no caso de direção.
Exemplo # 4
No código abaixo, estamos criando vários parágrafos usando nomes diferentes e depois aplicando cores diferentes do plano de fundo ou do texto em cada parágrafo quando selecionamos qualquer texto do parágrafo. Todos esses estilos serão feitos no CSS.
O ".P1 ”é usado aqui, que define o nome do parágrafo e depois usamos o seletor de“ seleção ”com este. Estamos mudando a cor da fonte de "P1" para "azul", então fica azul quando é selecionado. Então, temos "P2" e mudamos sua "cor de fundo" para "amarelo" quando o texto é selecionado. Agora vem o "P3", usamos novamente o seletor de "seleção" e alteramos seu "fundo" para "vermelho.”
Depois disso, "P4" é mencionado com o seletor de "seleção", e estamos mudando a "cor de fundo", bem como a "cor" da fonte para "roxo" e "branco", respectivamente. Estamos mudando a "sombra de texto" de "p5" para "1px 1px vermelho". Ele criará uma sombra de cor "vermelha" quando selecionarmos o texto de "p5". Em seguida, usamos "P6" com esse seletor de "seleção" e usamos o "fundo", que muda de fundo e define preto para ele parecerá "preto" quando seu texto for selecionado. Também estilizamos todos esses parágrafos sem seleção, por isso usamos "corpo" e todas as propriedades que usamos aqui serão aplicadas a todos os parágrafos e títulos. Usamos a “família da fonte” e o definimos como “Sans-Serif”, então todo o texto aparece neste formato. Definimos sua “altura da linha” como “1.45 "e" Background-Color "para" Light-Rink."Nós também usamos" preenchimento "aqui, que é selecionado como" 1em ". O "tamanho da fonte" para todos os parágrafos é "20px" e também os conjuntos de "peso da fonte" como "ousado" para todos.
Estamos mostrando duas ou três capturas de tela de saída aqui e você pode notar a mudança na cor da fonte e a cor de fundo quando o texto é selecionado. Tudo isso é por causa do seletor de "seleção".
Conclusão
Neste guia, exploramos o conceito de seletor de "seleção". Como discutimos que esse seletor de "seleção" é usado para alterar a cor da fonte e também a cor de fundo quando o usuário seleciona o texto no qual o seletor de "seleção" é aplicado. Elaboramos vários exemplos aqui nos quais utilizamos este seletor de "seleção". Espero que você entenda esse seletor de "seleção" depois de passar por este guia, e isso o ajudará muito em seus projetos ou sites.