{"id":725,"date":"2024-04-23T11:32:30","date_gmt":"2024-04-23T14:32:30","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=725"},"modified":"2025-11-07T13:23:06","modified_gmt":"2025-11-07T16:23:06","slug":"seletores-de-atributos-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/seletores-de-atributos-css\/","title":{"rendered":"Seletores de Atributos CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 3<\/span> minutos<\/span><\/span>\n

Seletores de Atributos CSS<\/strong>: Os Seletores de Atributos s\u00e3o uma extens\u00e3o poderosa dos Seletores CSS, permitindo que voc\u00ea aplique estilos a elementos HTML n\u00e3o apenas por seu nome de tag, Classe ou ID, mas com base na presen\u00e7a ou no valor de qualquer um de seus atributos<\/strong>.<\/p>\n\n\n\n

Essa funcionalidade \u00e9 indispens\u00e1vel para estilizar campos de formul\u00e1rio, links espec\u00edficos, ou elementos que usam atributos de dados customizados (data-*<\/code>).<\/p>\n\n\n\n

Neste artigo, vamos desvendar os diferentes operadores de Seletores de Atributos e como utiliz\u00e1-los para criar estilos precisos e din\u00e2micos.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. O Conceito e a Especificidade<\/h2>\n\n\n\n

Os Seletores de Atributos s\u00e3o definidos por colchetes []<\/code> e sempre adicionam a mesma pontua\u00e7\u00e3o de Especificidade<\/strong> de um Seletor de Classe<\/strong> (0, 0, 1, 0), independentemente da complexidade do valor buscado.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Sintaxe B\u00e1sica (Presen\u00e7a)<\/h3>\n\n\n\n

O seletor mais simples verifica se o atributo existe, independentemente do seu valor:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Seleciona todos os elementos 'input' que possuem o atributo 'required' *\/\ninput[required] { \n  border: 2px solid red; \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Operadores de Correspond\u00eancia de Valor<\/h2>\n\n\n\n
O poder dos Seletores de Atributos reside nos operadores que verificam se o valor do atributo corresponde a um padr\u00e3o espec\u00edfico:<\/p>\n\n\n\n
Operador<\/strong><\/td>Exemplo<\/strong><\/td>Significado<\/strong><\/td>Caso de Uso Comum<\/strong><\/td><\/tr><\/thead>
[attr=\"val\"]<\/code><\/strong><\/td>img[alt=\"logo\"]<\/code><\/td>Valor exatamente<\/strong> igual.<\/td>Estilizar um \u00fanico elemento sem usar ID.<\/td><\/tr>
[attr^=\"val\"]<\/code><\/strong><\/td>a[href^=\"https:\/\/\"]<\/code><\/td>Valor come\u00e7a com<\/strong> a string.<\/td>Estilizar todos os links seguros (HTTPS).<\/td><\/tr>
[attr$=\"val\"]<\/code><\/strong><\/td>a[href$=\".pdf\"]<\/code><\/td>Valor termina com<\/strong> a string.<\/td>Estilizar links que levam a arquivos espec\u00edficos.<\/td><\/tr>
[attr*=\"val\"]<\/code><\/strong><\/td>a[href*=\"google\"]<\/code><\/td>Valor cont\u00e9m<\/strong> a string em qualquer lugar.<\/td>Estilizar todos os links de um dom\u00ednio espec\u00edfico.<\/td><\/tr>
[attr~=\"val\"]<\/code><\/strong><\/td>p[class~=\"destaque\"]<\/code><\/td>Valor cont\u00e9m a string como uma palavra inteira<\/strong> separada por espa\u00e7o.<\/td>Usado para sele\u00e7\u00e3o em listas ou classes (melhor usar o seletor de classe .destaque<\/code>).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Exemplo de Uso com Formul\u00e1rios e Links<\/h3>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* 1. Estiliza inputs de e-mail (operador de valor exato) *\/\ninput[type=\"email\"] { \n  background-color: lightyellow; \n}\n\n\/* 2. Estiliza links que apontam para fora do dom\u00ednio (come\u00e7a com http:\/\/ ou https:\/\/) *\/\na[href^=\"http\"]:not([href*=\"meudominio.com\"]) { \n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. O Uso Moderno: Atributos de Dados (data-*<\/code>)<\/h2>\n\n\n\n
A aplica\u00e7\u00e3o mais comum e poderosa dos seletores de atributos modernos \u00e9 com os atributos de dados customizados introduzidos no HTML5.<\/p>\n\n\n\n