Seletores de Atributos CSS: Uma das características poderosas do CSS é a capacidade de selecionar elementos com base em seus atributos. Esses são conhecidos como seletores de atributos.
Seletores de Presença de Atributos
Os seletores de presença de atributos são usados para selecionar elementos com base na presença de um determinado atributo, independentemente do valor do atributo. A sintaxe é simples: você coloca o nome do atributo entre colchetes.
input[type] {
border: 1px solid black;
}No exemplo acima, todos os elementos input que têm um atributo type receberão uma borda sólida preta.
Seletores de Valor de Atributo Exato
Os seletores de valor de atributo exato levam a seleção de atributos um passo adiante. Em vez de selecionar elementos com base na presença de um atributo, eles selecionam elementos com base no valor exato de um atributo.
input[type="text"] {
background-color: lightgray;
}No exemplo acima, todos os elementos input que têm um atributo type com o valor exato de “text” receberão um fundo cinza claro.
Correspondência de uma Parte do Valor do Atributo
Às vezes, você pode querer selecionar elementos com base em uma parte do valor de um atributo. CSS fornece várias maneiras de fazer isso.
a[href^="https"] {
color: green;
}
a[href$=".pdf"] {
background-color: yellow;
}
a[href*="wikipedia"] {
font-weight: bold;
}No exemplo acima, todos os elementos a cujo atributo href começa com “https” serão coloridos de verde. Todos os elementos a cujo atributo href termina com “.pdf” terão um fundo amarelo. E todos os elementos a cujo atributo href contém “wikipedia” em qualquer lugar dentro do valor serão em negrito.
Conclusão
Os seletores de atributos em CSS são uma ferramenta poderosa que permite aos desenvolvedores selecionar elementos com precisão com base nos atributos e valores dos atributos.
Eles podem ser usados para estilizar elementos de maneira específica, dependendo da presença, do valor exato ou de uma parte do valor de um atributo. Compreender e utilizar efetivamente os seletores de atributos pode levar suas habilidades de CSS a um novo patamar.
Espero que este artigo tenha fornecido uma visão clara e abrangente dos seletores de atributos em CSS, juntamente com exemplos práticos de código.
E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!
