Seletores de Atributo: Estilizando por características

Descubra como selecionar elementos que possuem um atributo específico ou um valor de atributo.

Até agora, você aprendeu a selecionar elementos por seu tipo (<p>, <h1>), por sua classe (.destaque) e por seu ID (#menu). Mas e se você quiser estilizar elementos com base em atributos HTML que eles possuem, ou até mesmo no valor desses atributos?

Pense nos seletores de atributo como um "detetive" que procura elementos com base em suas "características" ou "qualidades" específicas. Por exemplo, você pode querer estilizar todos os links que apontam para um determinado tipo de arquivo, ou todos os campos de formulário que são do tipo "texto".

Como funcionam os Seletores de Atributo

Os seletores de atributo são colocados entre colchetes [] e podem ser usados de várias maneiras:

  1. Selecionar elementos que possuem um atributo específico:

    • Sintaxe: [atributo]
    • Exemplo: [title] seleciona todos os elementos que possuem o atributo title.

  2. Selecionar elementos com um atributo e um valor específico:

    • Sintaxe: [atributo="valor"]
    • Exemplo: [type="text"] seleciona todos os elementos que possuem o atributo type com o valor text.

  3. Selecionar elementos cujo atributo contém uma palavra específica (separada por espaços):

    • Sintaxe: [atributo~="palavra"]
    • Exemplo: [class~="btn"] seleciona elementos cuja lista de classes (atributo class) contém a palavra "btn". (Útil para classes, mas .btn é mais comum).

  4. Selecionar elementos cujo atributo começa com um valor específico:

    • Sintaxe: [atributo^="valor"]
    • Exemplo: [href^="https://"] seleciona todos os links (<a>) cujo atributo href começa com "https://".

  5. Selecionar elementos cujo atributo termina com um valor específico:

    • Sintaxe: [atributo$="valor"]
    • Exemplo: [href$=".pdf"] seleciona todos os links (<a>) cujo atributo href termina com ".pdf".

  6. Selecionar elementos cujo atributo contém um valor específico em qualquer lugar:

    • Sintaxe: [atributo*="valor"]
    • Exemplo: [href*="example.com"] seleciona todos os links (<a>) cujo atributo href contém "example.com" em qualquer parte da string.

  7. Selecionar elementos cujo atributo tem um valor que é exatamente o valor especificado ou começa com ele seguido de um hífen:

    • Sintaxe: [atributo|="valor"]
    • Exemplo: [lang|="en"] seleciona elementos com lang="en" ou lang="en-US", lang="en-GB", etc. (Útil para idiomas).

Exemplos Práticos:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Seletores de Atributo</title>
  <style>
    /* Aqui vamos definir o CSS */
  </style>
</head>
<body>
  <a href="https://www.google.com" target="_blank">Google</a>
  <a href="documento.pdf">Baixar PDF</a>
  <a href="https://www.exemplo.com/pagina">Página Exemplo</a>
  <input type="text" placeholder="Nome">
  <input type="email" placeholder="Email">
  <button type="submit">Enviar</button>
  <p title="Informação importante">Este parágrafo tem um tooltip.</p>
  <div data-info="extra">Dados extras</div>
</body>
</html>

Agora, vamos aplicar alguns estilos usando seletores de atributo:

/* 1. Estiliza todos os elementos que possuem o atributo 'title' */
[title] {
  border: 1px solid gray;
  padding: 5px;
}

/* 2. Estiliza todos os inputs do tipo 'text' */
input[type="text"] {
  background-color: lightyellow;
  border: 1px solid orange;
}

/* 3. Estiliza links que apontam para arquivos PDF */
a[href$=".pdf"] {
  color: red;
  font-weight: bold;
}

/* 4. Estiliza links que começam com 'https://' */
a[href^="https://"] {
  text-decoration: none;
  color: green;
}

/* 5. Estiliza elementos que possuem o atributo 'data-info' */
[data-info] {
  font-style: italic;
  color: gray;
}

/* 6. Estiliza elementos cujo atributo 'href' contém 'example.com' */
a[href*="example.com"] {
  background-color: #e0ffe0; /* Verde claro */
}

Resultado:

  • O parágrafo com title terá uma borda cinza.
  • O input de texto terá fundo amarelo claro e borda laranja.
  • O link "Baixar PDF" ficará vermelho e em negrito.
  • Os links "Google" e "Página Exemplo" terão o sublinhado removido e ficarão verdes (o "Página Exemplo" também terá fundo verde claro).
  • O div com data-info ficará em itálico e cinza.

Combinando com outros Seletores

Assim como os seletores combinadores, os seletores de atributo podem ser combinados com seletores de tipo, classe e ID para criar regras ainda mais específicas.

Exemplo:

/* Seleciona um input do tipo 'text' que também tem a classe 'campo-obrigatorio' */
input[type="text"].campo-obrigatorio {
  border-color: red;
}

/* Seleciona um link com a classe 'download' que aponta para um PDF */
a.download[href$=".pdf"] {
  background-color: #ffcccc;
}

Quando usar Seletores de Atributo?

  • Quando você quer estilizar elementos com base em seus atributos HTML (ex: target="_blank", disabled, required).
  • Quando você quer estilizar elementos com base em partes específicas do valor de um atributo (ex: links para PDFs, links externos, campos de formulário de um tipo específico).
  • Para criar estilos mais robustos e menos dependentes de classes adicionais no HTML.

Os seletores de atributo são uma ferramenta poderosa para adicionar mais flexibilidade e precisão ao seu CSS, permitindo que você estilize elementos com base em suas características intrínsecas.