Seletores de atributos CSS
- [Atributo] Seletor
- [atributo = “value”] seletor
- [atributo ~ = "value"] seletor
- [atributo | = “valor”] seletor
- [atributo^= “value”] seletor
- [atributo $ = "Valor"] Seletor
- [atributo*= “Valor”] Seletor
Cada um deles é explicado em detalhes abaixo.
[Atributo] Seletor
Para fins de elementos de estilo que têm um atributo específico, o seletor [atributo] é usado.
Sintaxe
Element [attribute]valor da propriedade;
Ou,
[atributo]valor da propriedade;
Exemplo
Digamos que você queira estilizar todos os elementos tendo atributo alt, Em seguida, use o seletor [atributo] da seguinte maneira.
Html
Este é um título
Este é um parágrafo.
No código acima, criamos dois elementos
e
. O
foram atribuídos uma classe de atributo, enquanto que, o
O elemento foi atribuído um atributo alt.
CSS
[alt]estilo de fonte: itálico;
Agora, usando o seletor [atributo], estamos estilizando apenas esses elementos com o atributo alt. Neste caso, já que apenas o
Elemento tem o atributo alt, portanto, a regra de estilo será aplicada apenas no parágrafo.
Saída
Elementos com atributo alt foram estilizados.
[atributo = “value”] seletor
Atttibutes têm algum valor; portanto, para estilizar um elemento com um determinado atributo e valor, usamos o seletor [attribute = "value"].
Sintaxe
elemento [attribute = "value"]valor da propriedade;
Ou,
[attribute = "value"]valor da propriedade;
Exemplo
Suponha que você queira estilizar alguns elementos com um atributo e valor específicos. Siga o exemplo abaixo.
Html
Aqui criamos um campo de entrada, bem como um botão. Ambos os elementos têm um atributo pela classe de nome, no entanto, os valores de ambos os atributos de classe são diferentes.
CSS
[class = "input"]Background-Color: rosa;
Size da fonte: 20px;
[class = "btn"]
preenchimento: 3px;
borda: 1px preto sólido;
No código acima, estamos usando o seletor [attribute = “value”] para estilizar o campo de entrada e o botão.
Saída
Ambos os elementos têm sido o estilo com sucesso.
[atributo ~ = "value"] seletor
Existem certos atributos que têm uma lista de valores separados pelo espaço, por exemplo, class = "Hello World". Agora, para estilizar elementos com esses valores de atributo, o seletor [atributo ~ = "value"] é usado. Ele estiliza elementos cujo valor de atributo corresponde a um desses valores.
Sintaxe
elemento [attribute ~ = "value"]valor da propriedade;
Ou,
[atributo ~ = "value"]valor da propriedade;
Exemplo
O exemplo abaixo demonstra o funcionamento do seletor em discussão.
Html
Este é um título
Este é um parágrafo.
Este é outro parágrafo.
No código acima, definimos três elementos. Cada um desses elementos tem o mesmo atributo, no entanto, valores diferentes.
CSS
[classe ~ = "Head"]cor roxa;
[classe ~ = "para"]
Size da fonte: 20px;
estilo de fonte: itálico;
Usando o seletor [atributo ~ = "value"], estamos estilizando o cabeçalho e os parágrafos. Como você pode ver que o valor do atributo de cada
O elemento é uma lista de valores separados pelo espaço, no entanto, a palavra -chave "para" existe em ambos os valores; portanto, as regras de estilo definidas para o valor do atributo "para" serão aplicadas aos dois parágrafos.
Saída
O seletor [atributo ~ = "value"] está funcionando corretamente.
[atributo | = “valor”] seletor
Para fins de estilo de elementos com atributos com valores que são separados por hífen, o seletor [atributo | = “value”] é usado.
Sintaxe
elemento [attribute | = "value"]valor da propriedade;
Ou,
[atributo | = "value"]valor da propriedade;
Exemplo
Siga o exemplo abaixo mencionado para entender o funcionamento do seletor [atributo | = “value”].
Html
Este é um título
Este é um parágrafo.
Este é outro parágrafo.
O
e a primeira
elemento tem um valor de atributo separado por hífen, no entanto, o valor do atributo do último
elemento não é separado por um hífen.
CSS
[classe | = "Linux"]Background-Color: Bisque;
estilo de fonte: itálico;
Agora, esse seletor aplicará apenas regras de estilo ao título e o primeiro parágrafo, porque apenas esses dois elementos têm um valor de atributo que é separado por um hífen.
Saída
As regras de estilo foram aplicadas a
e a primeira
elemento.
[atributo^= “value”] seletor
Para estilizar elementos com atributos com um valor inicial específico, o seletor [attribute^= "value"]. O valor não é necessariamente a palavra inteira.
Sintaxe
elemento [attribute^= "value"]valor da propriedade;
Ou,
[atributo^= "value"]valor da propriedade;
Exemplo
Vamos usar o mesmo exemplo usado na seção acima para limpar o conceito do seletor [atributo^= "value"].
Html
Este é um título
Este é um parágrafo.
Este é outro parágrafo.
Observe que cada um dos elementos acima tem um valor de atributo começando com a palavra linux.
CSS
[classe ^= "Linux"]Background-Color: Bisque;
estilo de fonte: itálico;
Agora esse seletor irá estilizar todos os elementos porque cada um deles tem o mesmo valor de atributo inicial.
Saída
O seletor [atributo ^= "value"] está funcionando corretamente.
[atributo $ = "Valor"] Seletor
Para estilizar elementos com atributos com um valor final específico, o seletor [atributo $ = "value"]. O valor não é necessariamente a palavra inteira.
Sintaxe
elemento [atributo $ = "value"]valor da propriedade;
Ou,
[atributo $ = "value"]valor da propriedade;
Exemplo
Siga o exemplo abaixo para entender o funcionamento deste seletor de atributo.
Html
Algum texto.Algum texto.
Algum texto.
Aqui criamos três elementos div. Os dois primeiros elementos da div foram atribuídos um valor de atributo terminando com a palavra -chave "div".
CSS
[classe $ = "div"]Background-Color: bege;
preenchimento: 10px;
Size da fonte: 20px;
estilo de fonte: itálico;
O [atributo $ = "value"] aplicará as regras de estilo acima apenas para os dois primeiros elementos da div.
Saída
Os dois primeiros elementos da div foram estilizados usando o [atributo $ = “Value] Seletor.
[atributo*= “Valor”] Seletor
Com o objetivo de modelar todos os elementos com valores de atributo com uma palavra -chave específica, o seletor [atributo *= "value"] é usado.
Sintaxe
elemento [attribute *= "value"]valor da propriedade;
Ou,
[atributo *= "value"]valor da propriedade;
Exemplo
Suponha que você queira estilizar alguns elementos usando o seletor [attribute*= "value"]. Siga o código abaixo.
Html
Este é um parágrafo.
Este é outro parágrafo.
Nós criamos dois
elementos com valores de atributo “Para1” e “Para2”, respectivamente.
CSS
[classe *= "ar"]Background-Color: Bisque;
estilo de fonte: itálico;
Este seletor de atributo detectará qualquer valor de atributo com a palavra -chave "AR" e aplicará as regras de estilo acima nesse elemento.
Saída
O seletor [atributo*= "value"] está funcionando corretamente.
Conclusão
Você pode estilizar elementos HTML que têm certos atributos ou valores de atributo. Há um total de sete seletores de atributos CSS que são: [atributo] seletor, [attribute = "value"], [atributo ~ = "value"] seletor, [attribute | = "value"] seletor, [attribute ^= "" Valor ”] Seletor, [Atributo $ =“ Valor] Seletor e [atributo *= “Value”] Seletor. Todos esses seletores servem a um propósito diferente que discutimos em detalhes neste post, juntamente com exemplos relevantes.