Seletores de Atributos CSS

Tempo de leitura: 4 minutos

Seletores de Atributos CSS: Os seletores CSS são ferramentas poderosas que nos permitem aplicar estilos a elementos HTML de forma precisa. Um tipo específico de seletor, os seletores de atributos, nos permitem direcionar elementos com base em seus atributos HTML. Essa funcionalidade é essencial para criar estilos personalizados e dinâmicos, especialmente em cenários onde classes e IDs não são suficientes.

Neste artigo, vamos explorar em detalhes os seletores de atributos, como eles funcionam e como utilizá-los em seus projetos.

O que são Seletores de Atributos?

Seletores de atributos permitem que você selecione elementos HTML com base na presença ou no valor de um atributo específico. Eles são colocados entre colchetes [] após o nome do elemento.

Sintaxe básica:

CSS

elemento[atributo] {
  /* Estilos a serem aplicados */
}

Exemplo:

HTML

<a href="https://www.example.com">Link para o exemplo</a>

CSS

a[href] {
  color: blue;
  text-decoration: underline;
}

Neste exemplo, todos os elementos <a> que possuem o atributo href terão o texto na cor azul e sublinhado.

Tipos de Seletores de Atributos

Existem vários tipos de seletores de atributos, cada um com sua própria sintaxe e funcionalidade:

Presença:

Seleciona elementos que possuem um determinado atributo, independentemente do valor.

CSS

input[required] { border: 2px solid red; }

Valor exato:

Seleciona elementos cujo atributo tem um valor específico.

CSS

img[alt="logo"] { border-radius: 50%; }

Começa com:

Seleciona elementos cujo valor do atributo começa com uma determinada string.

CSS

a[href^="https://"] { color: green; }

Termina com:

Seleciona elementos cujo valor do atributo termina com uma determinada string.

CSS

input[type$="password"] { letter-spacing: 2px; }

Contém:

Seleciona elementos cujo valor do atributo contém uma determinada string.

CSS

a[href*=".pdf"] { font-weight: bold; }

Contém exatamente:

Seleciona elementos cujo valor do atributo é exatamente igual a uma lista de palavras separadas por espaços.

CSS

input[type="checkbox", type="radio"] { margin-right: 10px; }

Hifen:

Seleciona elementos cujo valor do atributo começa com uma determinada string seguida por um hífen.

CSS

div[data-type^="user-"] { background-color: lightblue; }

Combinando Seletores de Atributos com Outros Seletores

Seletores de atributos podem ser combinados com outros seletores para criar regras CSS mais específicas. Por exemplo:

CSS

div.error input[type="text"] {
  border: 2px solid red;
}

Este seletor aplica um estilo de borda vermelha a todos os elementos <input> do tipo “text” que estão dentro de uma div com a classe “error”.

Casos de Uso Comuns

Estilos personalizados para elementos HTML5: Aplique estilos específicos a elementos como <nav>, <section>, <article>, etc.
Formulários: Crie estilos personalizados para diferentes tipos de inputs, como campos obrigatórios, campos desabilitados, etc.
Tabelas: Aplique estilos diferentes a células com base em seus atributos data-*.
Links: Crie estilos personalizados para links internos, externos, links para arquivos PDF, etc.

Exemplos Adicionais

HTML

<input type="text" id="nome" name="nome" required>
<input type="email" name="email">

CSS

input[required]:invalid {
  border: 2px solid red;
}

input[type="email"] {
  width: 300px;
}

#nome {
  font-size: 18px;
}

Conclusão

Seletores de Atributos CSS: Os seletores de atributos são uma ferramenta poderosa para criar estilos personalizados e dinâmicos em suas páginas web. Ao entender os diferentes tipos de seletores de atributos e como combiná-los com outros seletores, você poderá escrever código CSS mais conciso e eficaz.

Dicas:

Teste seus estilos: Verifique se seus estilos estão sendo aplicados corretamente em diferentes navegadores.
Use seletores de atributos com moderação: Evite sobrecarregar seu CSS com muitos seletores de atributos, pois isso pode torná-lo difícil de manter.
Combine com outras técnicas: Utilize seletores de atributos em conjunto com classes e IDs para criar estilos precisos.

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: