Além da utilidade óbvia de selecionar elementos com um atributo de dados exatamente correspondente, há muito mais coisas que podemos alcançar com os seletores de atributo CSS. Em geral, o seletor de atributo pode direcionar qualquer atributo que esteja anexado a um elemento HTML. Por padrão, o seletor é sensível a maiúsculas e minúsculas e tem uma especificidade inferior do que id e classes.
Aqui está um seletor de atributo em sua forma mais simples, selecionando cada elemento âncora que possui um hrefatributo – independentemente do URL href real:
a[href] {
/* ... */
}
Se quisermos que seja mais específico sobre qual hrefalvo, podemos passar explicitamente a URL para o seletor de atributos como este
a[href="https://specific-url.com"] {
/* ... */
}
Uma das últimas mudanças nas especificações introduziu um novo sinalizador para seletores de atributo, o que nos permite tornar a correspondência sem distinção entre maiúsculas e minúsculas, adicionando um iapós o nosso seletor. Isso é razoavelmente bem suportado e funciona em todos os navegadores modernos, exceto o IE11.
a[href="https://specific-url.com" i] {
/* matches <a href="https://SpEciFic-url.com"></a> ... */
}
Tipos especiais de seletores de atributo
Além de combinar um atributo com um atributo existente ou um valor específico, podemos usar outros tipos de seletores de atributo para obter correspondência parcial no valor de um atributo. Esses seletores também podem ser combinados para corresponder a elementos muito específicos.
O atributo CSS contém
Usando o operador curinga *, podemos corresponder a qualquer elemento que tenha um atributo contendo a string fornecida em qualquer formato. Isso significa que o exemplo abaixo que correspondam exactamente à frase value, mas também something value something, bem como somethingvaluesomething.
[data-attribute*="value"] {
/* ... */
}
O atributo CSS começa com
Se quisermos procurar um atributo cujo valor comece com uma determinada string, podemos usar o ^operador lie abaixo. Nesse caso, apenas corresponderíamos value somethinge valuesomethingnão something value.
[data-attribute^="value"] {
/* ... */
}
Atributo CSS termina com
Ao contrário de procurar correspondência no início, também podemos olhar no final do valor de um atributo usando o $operador. Combinaríamos, something valuemas não value something. Isso é especialmente interessante porque sabemos que os arquivos sempre têm uma determinada extensão e, ao passar o nome completo para um atributo de dados, seríamos capazes de combinar elementos que representam documentos PDF como este a[href$="pdf"].
[data-attribute$="value"] {
/* ... */
}
O atributo CSS está em listas separadas por espaço ou por traço
Existem dois seletores que nos permitem procurar especificamente por correspondências dentro de listas, onde um só está correspondendo quando o valor é separado por traços |e o outro operador corresponde a tudo dentro de uma lista separada por espaço ~. Especialmente a separação do espaço também pode ser alcançada com outros operadores mencionados acima.
[data-attribute~="value"] {
/* matches eg. <li data-years="thor value loki">...</li> */
}
[data-attribute|="value"] {
/* matches eg. <li data-years="value-2021">...</li> */
}
Combinando seletores de atributos
Claro, também podemos usar vários seletores de atributo simultaneamente para selecionar elementos específicos. Isso pode ser especialmente útil quando o HTML nos fornece informações suficientes para criar estilos diferentes apenas por meio de nossos atributos. Digamos que queremos dar ícones a cada link de download de arquivo em um site e um ícone especial para PDFs. Podemos combinar o contém e termina com seletores para selecionar todos os arquivos e, em seguida, localizar especificamente todos os PDFs.
a[href*="/downloads"] {
/* file is in /downloads directory */
}
a[href*="/downloads"][href$="pdf"] {
/* file is in /downloads directory */
/* AND ends with pdf */
}
Negando o seletor de atributo com: não
Todos os seletores de atributo acima também podem ser combinados com o :notseletor CSS , então também podemos pegar nosso exemplo acima e encontrar todos os arquivos que estão dentro do diretório de downloads, mas especificamente não são arquivos PDF.
a[href*="/downloads"]:not([href$="pdf"]) {
/* file is in /downloads directory */
/* AND ends NOT with pdf */
}
Usando seletores de atributo em Javascript
Assim como usar seletores de classe e id regulares, também podemos utilizar todos os seletores acima ao escrever JavaScript para selecionar elementos DOM.
let team = document.querySelector('img[src*="team"]');