Existem muitas maneiras de selecionar elementos em CSS. A seleção mais básica é por nome de tag, como p ( ). Quase tudo mais específico do que um seletor de tag usa atributos - classe IDambos selecionam esses atributos em elementos HTML. Mas classe IDnão são os únicos atributos que os desenvolvedores podem selecionar. Podemos usar qualquer um dos atributos de um elemento como seletores.
A seleção de atributos possui uma sintaxe especial. Aqui está um exemplo:
a(href="https://css-tricks.com") ( color: #E18728; )Esse é um seletor de correspondência exata que selecionará apenas links com o hrefvalor de atributo exato de “https://css-tricks.com”.
Os Sete Tipos Diferentes
Os seletores de atributo diferenciam maiúsculas de minúsculas por padrão (consulte a correspondência sem diferenciação de maiúsculas e minúsculas abaixo) e são escritos entre colchetes ().
Existem sete tipos diferentes de correspondências que você pode encontrar com um seletor de atributo, e a sintaxe é diferente para cada um. Cada um dos seletores de atributo mais complexos baseia-se na sintaxe do seletor de correspondência exata - todos eles começam com o nome do atributo e terminam com um sinal de igual seguido do (s) valor (es) do atributo, geralmente entre aspas. O que fica entre o nome do atributo e o sinal de igual é o que faz a diferença entre os seletores.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Valor contém: o valor do atributo contém um termo como o único valor, um valor em uma lista de valores ou como parte de outro valor. Para usar este seletor, adicione um asterisco (*) antes do sinal de igual. Por exemplo, img(alt*="art")irá selecionar imagens com o texto alternativo “arte abstrata” e “atleta iniciando um novo esporte”, pois o valor “arte” está na palavra “iniciando”.
O valor está em uma lista separada por espaço: o valor é o único valor de atributo ou é um valor inteiro em um conjunto de valores separados por espaço. Ao contrário do seletor “contém”, este seletor não procurará o valor como um fragmento de palavra. Para usar este seletor, adicione um til (~) antes do sinal de igual. Por exemplo, img(alt~="art")selecionará imagens com o texto alternativo “arte abstrata” e “exposição de arte”, mas não “atleta iniciando um novo esporte” (que o seletor “contém” selecionaria).
O valor começa com: o valor do atributo começa com o termo selecionado. Para usar este seletor, adicione um circunflexo (^) antes do sinal de igual. Não se esqueça, a distinção entre maiúsculas e minúsculas é importante. Por exemplo, img (alt = ”arte”) selecionará imagens com o texto alternativo “exposição de arte” e “padrão artístico”, mas não uma imagem com o texto alternativo “Arthur Miller” porque “Arthur” começa com uma letra maiúscula .
O valor é o primeiro em uma lista separada por traços: Este seletor é muito semelhante ao seletor “começa com”. Aqui, o seletor corresponde a um valor que é o único valor ou é o primeiro em uma lista de valores separados por traços. Para usar este seletor, adicione uma barra vertical (|) antes do sinal de igual. Por exemplo, li(data-years|="1900")selecionará os itens da lista com um data-yearsvalor de “1900-2000”, mas não o item da lista com um data-yearsvalor de “1800-1900”.
O valor termina com: o valor do atributo termina com o termo selecionado. Para usar este seletor, adicione um cifrão ($) antes do sinal de igual. Por exemplo, a(href$="pdf")seleciona todos os links que terminam com .pdf.
Uma observação sobre as aspas: Você pode usar aspas sem aspas em algumas circunstâncias, mas as regras para selecionar sem aspas são inconsistentes entre navegadores. As cotações sempre funcionam, portanto, se você continuar usando-as, pode ter certeza de que seu seletor funcionará.
Veja os Seletores de Atributos da Caneta por CSS-Tricks (@ css-tricks) no CodePen.
Curiosidade: os valores são tratados como strings, então você não precisa fazer nenhum escape extravagante de caracteres para fazê-los corresponder, como faria se você usasse caracteres incomuns em uma classe ou seletor de ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Correspondência sem distinção entre maiúsculas e minúsculas
Os seletores de atributo que não diferenciam maiúsculas de minúsculas fazem parte da especificação de Seletores Nível 4 do Grupo de Trabalho CSS. Conforme mencionado acima, as strings de valor de atributo são, por padrão, sensíveis a maiúsculas e minúsculas, mas podem ser alteradas para não diferenciam maiúsculas de minúsculas adicionando ilogo antes do colchete de fechamento:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )A correspondência sem distinção entre maiúsculas e minúsculas pode ser muito útil para direcionar atributos que contêm texto imprevisível escrito por humanos. Por exemplo, suponha que você esteja estilizando um balão de fala em um aplicativo de bate-papo e queira adicionar um “aceno de mão” a qualquer mensagem com o texto “olá” de alguma forma. Você poderia fazer isso apenas com CSS, usando um matcher que não diferencia maiúsculas de minúsculas para capturar todas as variações possíveis:
Veja a correspondência de atributo CSS que não diferencia maiúsculas de minúsculas por CSS-Tricks (@ css-tricks) em CodePen.
Combinando-os
Você pode combinar um seletor de atributo com outros seletores, como tag, classe ou ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Ou ainda combine vários seletores de atributos. Este exemplo seleciona imagens com texto alternativo que inclui a palavra "pessoa" como o único valor ou um valor em uma lista separada por espaços e um srcvalor que inclui o valor "lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Consulte os atributos combinados da caneta e a seleção somente de atributos por CSS-Tricks (@ css-tricks) no CodePen.
Seletores de atributos em JavaScript e jQuery
Os seletores de atributos podem ser usados no jQuery como qualquer outro seletor CSS. Em JavaScript, você pode usar seletores de atributo com document.querySelector()e document.querySelectorAll().
Veja os Seletores de Atributo de Caneta em JS e jQuery por CSS-Tricks (@ css-tricks) em CodePen.
Relacionado
- aula
- EU IA
Mais Informações
- The Skinny on Attribute Selectors
- Seletores de atributos em MDN
- Seletores de atributos na especificação W3C CSS
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | Nenhum | Nenhum | Nenhum | 7 + | Nenhum | Nenhum |