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 você validar seus códigos você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!