Carregando...

Seletores de atributo CSS

Até agora você encontrava o elemento pelo nome da tag, class, id e relações da árvore. Às vezes o próprio HTML já diz a verdade: este link tem target, aquele campo é type="email", o endereço começa com https. O seletor de atributo lê essa verdade — sem inventar uma class nova para cada caso.

O que é um seletor de atributo?

Um seletor de atributo encontra elementos que têm um atributo HTML específico. Você pode checar só a «presença», ou medir o valor com exatidão ou em parte. O nome do atributo vai entre colchetes: [attr].

Cinco padrões do dia a dia

Com estes você cobre quase todo o trabalho comum com atributos.

📊 Operadores do seletor de atributo

Padrão Significado simples Exemplo
[attr] Este atributo existe (qualquer valor) a[target]
[attr="value"] O valor é exatamente este input[type="email"]
[attr^="value"] O valor começa com este texto a[href^="https"]
[attr$="value"] O valor termina com este texto a[href$=".pdf"]
[attr*="value"] Este texto aparece em algum lugar do valor a[href*="docs"]

Só presença — [attr]

Quando você coloca só o nome entre colchetes, significa: «que tenha este atributo.» O valor não importa.

Presença — links que abrem nova aba

css
CSS Code 
a[target] {
font-weight: 600;
}

Quando ajuda?

Bandeiras opcionais no HTML: um link com target, ou um elemento com data-state — mesmo antes de filtrar o valor.

Valor exato — [attr="value"]

O = diz que o valor deve ser letra por letra o mesmo. Quase sempre coloque o valor entre aspas; fica mais claro e seguro.

Valor exato — campo de e-mail

css
CSS Code 
input[type="email"] {
border: 1px solid #0f766e;
}

Criar class ou usar type?

Se o HTML já traz type="email", escreva isso no seletor. Uma class nova (como .email-field) é necessária quando o mesmo visual também deve valer em algo sem esse atributo.

Início do valor — ^=

^= significa que o valor do atributo começa com este texto. Muito útil para endereços seguros ou um prefixo compartilhado.

Começa com — links https

css
CSS Code 
a[href^="https"] {
color: #0f766e;
}

Fim do valor — $=

$= significa que o valor termina com este texto. Ótimo para extensão de arquivo em href ou src.

Termina com — link PDF

css
CSS Code 
a[href$=".pdf"] {
font-style: italic;
}

Em algum lugar do valor — *=

*= diz: este texto aparece em qualquer parte do valor. É forte, mas logo fica generoso demais. Se você sabe o início ou o fim, ^= ou $= costumam ficar mais limpos.

Contém — caminho docs no endereço

css
CSS Code 
a[href*="docs"] {
text-decoration: underline;
}

Bons hábitos

  • Escreva o valor do seletor entre aspas: type="email"
  • Se a página estiver cheia, acrescente também o nome da tag: input[type="search"] lê melhor que [type="search"] sozinho
  • Respeite ortografia e maiúsculas/minúsculas como no HTML
  • Não troque toda class por atributo; vá ao atributo quando o próprio markup já carrega essa verdade

Experimente você

  1. Três links: um https://…, um que termina em .pdf, um com docs no caminho; mais <input type="email"> e <input type="text">.
  2. Coloque a[href^="https"] { color: #0f766e; } — só o link seguro muda de cor.
  3. a[href$=".pdf"] { font-style: italic; } — o link PDF fica em itálico.
  4. input[type="email"] { border-color: #0f766e; } — só o campo de e-mail ganha a borda.
  5. Opcional: teste a[href*="docs"]; pode pegar mais links do que prefixo/sufixo estrito.

Erros comuns

  • [type=email] sem aspas quando aspas são mais claras e seguras
  • *= no lugar de ^= — «contém» também pega o meio e links a mais acendem
  • Usar [class] em vez de .name para aparência comum
  • Esquecer que = quer o valor inteiro — type="text" não é type="textbox"
  • Misturar nomes de atributos — hreflang não é href

Resumo

  • O seletor de atributo trabalha com [ ] sobre atributos HTML
  • Só o nome = presença; = = valor exato
  • ^= começa, $= termina, *= em qualquer lugar do valor
  • Escolha o operador mais apertado que ainda diga sua intenção
  • Se precisar, cole também o nome da tag ao seletor
  • Pratique com href e type reais e atualize a página

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial