Seletores de Atributos CSS

Tempo de leitura: 3 minutos

Seletores de Atributos CSS: Os Seletores de Atributos são uma extensão poderosa dos Seletores CSS, permitindo que você aplique estilos a elementos HTML não apenas por seu nome de tag, Classe ou ID, mas com base na presença ou no valor de qualquer um de seus atributos.

Essa funcionalidade é indispensável para estilizar campos de formulário, links específicos, ou elementos que usam atributos de dados customizados (data-*).

Neste artigo, vamos desvendar os diferentes operadores de Seletores de Atributos e como utilizá-los para criar estilos precisos e dinâmicos.

1. O Conceito e a Especificidade

Os Seletores de Atributos são definidos por colchetes [] e sempre adicionam a mesma pontuação de Especificidade de um Seletor de Classe (0, 0, 1, 0), independentemente da complexidade do valor buscado.

Sintaxe Básica (Presença)

O seletor mais simples verifica se o atributo existe, independentemente do seu valor:

CSS

/* Seleciona todos os elementos 'input' que possuem o atributo 'required' */
input[required] { 
  border: 2px solid red; 
}

2. Operadores de Correspondência de Valor

O poder dos Seletores de Atributos reside nos operadores que verificam se o valor do atributo corresponde a um padrão específico:

Operador	Exemplo	Significado	Caso de Uso Comum
`[attr="val"]`	`img[alt="logo"]`	Valor exatamente igual.	Estilizar um único elemento sem usar ID.
`[attr^="val"]`	`a[href^="https://"]`	Valor começa com a string.	Estilizar todos os links seguros (HTTPS).
`[attr$="val"]`	`a[href$=".pdf"]`	Valor termina com a string.	Estilizar links que levam a arquivos específicos.
*`[attr="val"]`**	`a[href*="google"]`	Valor contém a string em qualquer lugar.	Estilizar todos os links de um domínio específico.
`[attr~="val"]`	`p[class~="destaque"]`	Valor contém a string como uma palavra inteira separada por espaço.	Usado para seleção em listas ou classes (melhor usar o seletor de classe `.destaque`).

Exemplo de Uso com Formulários e Links

CSS

/* 1. Estiliza inputs de e-mail (operador de valor exato) */
input[type="email"] { 
  background-color: lightyellow; 
}

/* 2. Estiliza links que apontam para fora do domínio (começa com http:// ou https://) */
a[href^="http"]:not([href*="meudominio.com"]) { 
  font-weight: bold;
}

3. O Uso Moderno: Atributos de Dados (`data-*`)

A aplicação mais comum e poderosa dos seletores de atributos modernos é com os atributos de dados customizados introduzidos no HTML5.

Os atributos data-* permitem armazenar dados extras sobre um elemento diretamente no HTML.

HTML

<button data-status="pending">Aguardando Aprovação</button>
<button data-status="approved">Aprovado</button>

Você pode estilizar dinamicamente o elemento baseado no status, sem precisar adicionar ou remover classes:

CSS

/* Estiliza o botão com status 'pending' */
button[data-status="pending"] {
  background-color: orange;
  color: white;
}

/* Estiliza o botão com status 'approved' */
button[data-status="approved"] {
  background-color: green;
  color: white;
}

4. Combinando Seletores de Atributos

Assim como qualquer outro seletor, os seletores de atributos podem ser combinados para criar regras altamente específicas:

CSS

/* Seleciona o elemento 'a' que tem a classe '.arquivo' E que termina com .pdf */
a.arquivo[href$=".pdf"] {
  padding-left: 20px;
  background-image: url('icone-pdf.svg');
}

✅ Conclusão Seletores de Atributos CSS

Os Seletores de Atributos CSS são ferramentas versáteis que oferecem um controle de estilização que vai além das classes e IDs. Eles são indispensáveis para trabalhar com formulários, links, e especialmente com atributos de dados customizados (data-*), permitindo que você crie estilos dinâmicos e altamente manuteníveis. Ao usar esses seletores, lembre-se que eles possuem a mesma pontuação de Especificidade de uma Classe (0, 0, 1, 0).

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: