Seletor de curinga CSS
Seletores de curinga
- O [atributo*= "valor"] é um seletor de curinga que é usado para encontrar itens cujo valor de atributo inclui a string que damos aqui como o valor.
- O [attribute = "value"] é um seletor de curinga que é usado para encontrar itens cujo valor de atributo começa com a string que damos aqui como o valor.
- O [atributo $ = "value"] Seletor é um seletor de curinga que é usado para encontrar elementos cujo valor de atributo termina com a string que damos aqui como o valor.
Exemplo 1
Estamos iniciando nosso código e executando esses códigos no Código do Visual Studio. Primeiro, abrimos um novo arquivo. Então, escolhemos o HTML como linguagem e depois colocamos “!"E pressione" Enter ". Todas as tags básicas html aparecem aqui. Então, não precisamos adicionar todas essas tags manualmente. Acabamos de colocar a tag "Link" na "cabeça" em que colocamos o nome do arquivo CSS. Dentro do corpo, colocamos um título e alguns recipientes de div e alguns parágrafos. Todos os divs e parágrafos contêm nomes de classes diferentes, então usaremos esses nomes como o valor no seletor de curinga para selecionar os elementos no CSS. Em seguida, aplicaremos um estilo diferente aos elementos selecionados.
Colocamos a sintaxe do seletor de curinga [classe * = "str"], que selecionará todos os elementos cujo nome de classe contém "str". Passamos "STR" como o valor deste seletor de curinga. Vamos aplicar algumas propriedades para que você note facilmente como ele seleciona os elementos e aplica o estilo a todos eles. Definimos "preto" como o "fundo" para todos os elementos que contêm "str" em seus nomes de classe.
Estamos definindo o texto "cor" para "branco" porque usamos preto para o fundo. Também alteramos o tamanho do texto, utilizando a propriedade "tamanho da fonte" e configurando-o para "18px". Também alinhamos o texto dos elementos selecionados ao "centro", utilizando a propriedade "font-família" e a definimos para a fonte "Arial". O peso da fonte dos elementos selecionados é definido como "ousado". Também fornecemos a saída de códigos neste tutorial. Consulte a saída e verifique como ele seleciona elementos e aplica todas essas propriedades aos elementos selecionados.
A saída mostra que seleciona todos os elementos cujos nomes de classe contêm "str" e as propriedades que utilizamos no código CSS são todos aplicados aos elementos selecionados.
Exemplo 2
Novamente temos várias classes de div e vários parágrafos com nomes de classes diferentes e um título no início. Aplicaremos o seletor de curinga no CSS e selecionaremos os elementos deste arquivo HTML e alteraremos o estilo desses elementos selecionados.
Utilizamos a segunda sintaxe do curinga neste exemplo, que é [classe $ = "str"]. Ele selecionará todos os elementos cujos nomes de classe terminam com a string "str". Também aplicamos as propriedades de estilo fornecidas que estamos utilizando nos elementos selecionados. Decoramos o texto selecionado usando a propriedade "decorativa de texto" e colocamos "sublinhado" para esta propriedade. Mudamos a "cor" do texto para "marrom". Também utilizamos a propriedade “do tamanho da fonte” e colocamos “22px” como seu valor para alterar o tamanho do texto. Também usamos o atributo "Font-Family" para definir a fonte como "Times New Roman" e o "peso da fonte" do elemento selecionado foi definido como "Bold.”
Aqui, você pode ver todas as classes cujos nomes terminam com a string "str" são selecionados e alterados. Todas as propriedades que descrevemos no CSS são aplicadas aqui nos elementos cujos nomes de classe terminam em "str". Tudo isso é por causa do uso do seletor de curinga.
Exemplo 3
Este arquivo html é o mesmo que acima. Nós apenas mudamos os nomes das classes de div e parágrafo. Usaremos a terceira sintaxe do seletor de curinga no CSS para este código.
Neste exemplo, usaremos a terceira sintaxe do curinga que é [classe^= "str"] e selecionará todos os elementos cujo nome de classe começa com a string "str". Para todos os itens com "STR" no início dos nomes das classes, definimos "rosa" como o "fundo". Mudamos a "cor" do texto para "vermelho". Usamos a propriedade "tamanho da fonte" e especificamos para "22px" para alterar o tamanho do texto. Também utilizamos o atributo "Font-Family" para definir o tipo de fonte para "calibri" e mudar o texto dos elementos selecionados para o "centro". O estilo de fonte dos elementos específicos foi definido aqui para "itálico".
Nesta captura de tela, todos esses elementos são estilizados cujo nome de classe começa com a string "str". O seletor de curinga seleciona todos esses elementos e aplica todas as propriedades. Você também pode ver isso na saída.
Exemplo 4
Vamos mudar o código HTML anterior um pouco. Estamos adicionando mais contêineres de div e adicionando mais parágrafos no arquivo HTML anterior e aplicaremos todos os três seletores de curingas no código CSS deste exemplo.
Neste código, primeiro aplicamos algum estilo no cabeçalho e alteramos a “família da fonte” para “argelino”. Também definimos o título no "centro", utilizando a propriedade "Text-Align". A propriedade de "decoração de texto" está aqui que estabelecemos como "sublinhado", para que ela desenhe o sublinhado para o título. A "cor" para isso é definida como "marrom".
Em seguida, usamos o seletor de curinga no qual colocamos "*" e "str" como o valor. Então, ele selecionará todas as classes que contêm "str" no nome da classe. Também usamos algumas propriedades que se aplicarão aos elementos selecionados. Depois de definir as propriedades do estilo para este seletor de curinga, estamos nos movendo em direção ao próximo seletor de curinga, que é essas propriedades dadas nesses elementos.
Agora, estamos usando o último seletor de curinga aqui, que escrevemos como “[classe $ =“ div ”]”. Portanto, ele selecionará os elementos cujo nome de classe termina na string "div" e também aplicará as propriedades dadas em todos eles. Todos esses seletores de curingas ignoram os elementos que não cumprem a condição desses seletores de curinga.
Veja essa saída, os elementos que contêm "STR" nos nomes de classe são iguais, aqueles elementos cujo nome de classe começa com "par" são estilizados da mesma forma, e aqueles elementos cujo nome de classe contém "div" no final de o nome da classe é o mesmo. E os elementos que não contêm "str" no nome da classe e também seus nomes de classe não começam com "par" e não terminam na string "div" não são selecionados e parecem simples aqui. Nenhuma propriedade é aplicada a eles.
Conclusão
O objetivo de escrever este tutorial é guiá -lo sobre os seletores de curinga CSS. Exploramos os seletores de curinga do CSS e explicamos o que são os seletores de curinga, como usar esses seletores de curingas e como eles funcionam. Discutimos que os seletores curinga são usados para escolher vários elementos ao mesmo tempo e usados para aplicar propriedades de estilo aos elementos que escolhemos usando esses seletores de curinga. Também mostramos exemplos em que utilizamos esses seletores curinga e fornecemos os resultados de todos os exemplos neste tutorial.