Existe um seletor CSS para elementos que contêm certos texto?

Os seletores CSS selecionam os elementos HTML para aplicar propriedades de estilo. Estes são utilizados para encontrar os elementos que você deseja estilizar. Existem certas categorias de seletores de CSS, como pseudo-classe, seletores simples e outros. Mais especificamente, o seletor de atributos é a melhor opção para selecionar o elemento com texto definido. O seletor de combinador também pode ser aplicado para esse fim.

Este artigo demonstrará os seguintes métodos:

• Método 1: Selecionando elemento contendo certos texto usando seletor de atributo CSS
• Método 2: Selecionando elemento contendo certos texto usando o seletor de irmãos gerais do CSS

Método 1: Selecionando elemento contendo certos texto usando seletor de atributo CSS

O seletor de atributos CSS “CSS [atributo ~ = "Value"] seletor”Pode ajudar a selecionar o elemento com texto definido.

Sintaxe

Vamos entender a sintaxe do seletor de atributos CSS:

[Nome do atributo ~ = Value]

// declarações CSS

Aqui:

• ““Nome do Atributo”: O atributo usado no elemento HTML com determinado texto é especificado aqui.
• ““~”: Este símbolo é um combinador geral de irmãos. É utilizado para escolher todos os elementos que são o próximo irmão de um elemento.
• ““valor”: Indica o valor do atributo.

Exemplo

No arquivo HTML, siga as instruções listadas:

• Primeiro, adicione o “”Elemento e atribua uma classe“Itens-Div”.
• Adicione o "

  ","

  ", e "

  ”Elementos dentro da div.

• O "

  " e "

  ”Ajuste os títulos na página. O "

  ”O cabeçalho é um pouco menor que o“

  " elemento.

• O "

  ”Elemento especifica o conteúdo de texto na página:

Linuxhint

Coisas estacionárias

livro

lápis

bloco de anotações

livro

Vamos estilizar o div “Itens-Div”E o título“

”Ao aplicar as propriedades do CSS, conforme mencionado abaixo. Depois disso, veremos como selecionar o “

"Texto do elemento usando os seletores de atributos CSS.

Estilo de estilo “itens-div”

A seguir, as propriedades do CSS são aplicadas ao “Itens-Div" aula:

.Itens-Div
Alinhamento de texto: centro;
Size da fonte: 17px;
Fonte-família: 'Trebuchet MS';

Aqui:

• ““alinhamento de texto”Determina o alinhamento do texto.
• ““tamanho da fonte”Ajusta o tamanho da fonte do elemento.
• ““família de fontes”Escolhe o estilo da fonte do elemento.

Elemento de estilo “H2”

““H2”Também é conhecido como seletor de elementos. É usado para estilizar o “

”Elemento com as seguintes propriedades:

H2
tamanho da fonte: 30px;
Espacamento de cartas: 0.2em;
Cor: RGB (182, 14, 238);

No bloco de código acima:

• ““espaçamento de cartas”Ajusta o espaçamento entre os caracteres do elemento.
• ““cor”Atribui a cor ao texto.
• ““tamanho da fonte”A propriedade está definida na seção acima.

Selecione o texto "livro"

Para selecionar um texto específico do documento, não há seletor específico. O atributo do elemento só precisa ser especificado. Então, com a ajuda do valor do atributo, podemos selecionar o texto no CSS:

[estacionário ~ = "livro"]
cor de fundo: cornallowerblue;

Aqui, no CSS, o “cor de fundo”A propriedade é ajustada ao texto especificando o atributo“estacionário"Tendo valor"livro”.

A saída abaixo mostra que todos os elementos com o valor do atributo “livro”São estilizados:

Agora, vamos verificar o exemplo para aplicar estilos ao “lápis" texto. Para esse fim, o atributo estacionário com o valor “lápis”É buscado no CSS através do seletor de atributos:

[estacionário ~ = lápis]
Background-Color: RGB (240, 168, 234);
preenchimento: 5px;

Aqui:

• ““cor de fundo”Especificou a cor do fundo do elemento.
• ““preenchimento”Atribui espaço ao redor do conteúdo do elemento.

Saída

Método 2: Selecionando elemento contendo certos texto usando o seletor de irmãos gerais do CSS

Há outro método para aplicar estilos nos elementos com texto. Mas esse método deve ser utilizado quando você tem vários “

”Elementos com algum texto e você precisa estilizar todos eles de uma vez. Para fazer isso, especifique o elemento que é pouco antes do “

Os elementos, em seguida, adicione o símbolo Geral de Combinador de Irmãos (~) e mencione o elemento com texto para aplicar estilos.

Sintaxe

Aqui está a sintaxe do cenário acima mencionado:

Primeira sequência-elementos ~ Segunda sequência-elementos
Declarações do CSS

Exemplo

Vamos adicionar estilo a todos “ H4 ~ P
Cor: Crimson;
intensidade da fonte: Negrito;

O "H4 ~ p”Significa o“

”Elementos que são irmãos diretos do“

" elemento. As seguintes propriedades descritas são adicionadas a ele:

• O "espessura da fonte”Propriedade designa a espessura da fonte do elemento.
• O "cor”Propriedade corrige a cor da fonte.

Saída

Usando essas maneiras, você pode selecionar elementos com determinado texto para estilizar no CSS.

Conclusão

Para selecionar os elementos que contêm certos texto, o CSS “Seletores de atributos" e "Seletor de combinador de irmãos gerais" pode ser usado. Os seletores de atributos especificam o nome do atributo do elemento e seu valor. Em seguida, declare as propriedades do CSS para isso. O seletor de combinador de irmãos gerais seleciona todos os elementos que são seguidos pelo seletor anterior. Este artigo demonstrou as maneiras de selecionar elementos no CSS com determinado texto.