CSS - Seletores de Atributos

João E. -

Sintaxe e Uso

Os seletores de atributos no CSS permitem que você selecione elementos com base em seus atributos. A sintaxe básica de um seletor de atributo consiste em colchetes [] contendo o nome do atributo. Você pode refinar a seleção especificando o valor do atributo ou usando operadores especiais.

Para selecionar um elemento com um atributo específico, use esta sintaxe:

Exemplo: Seletor de Atributo Básico

[attribute] {
  /* Estilos CSS */
}

Para selecionar todos os elementos <a> com um atributo target, use:

Exemplo: Selecionando Elementos <a> com um Atributo target

a[target] {
  /* Estilos CSS */
}

Você também pode selecionar elementos com base no valor de um atributo. Para fazer isso, adicione um sinal de igual = e o valor do atributo entre aspas após o nome do atributo:

Exemplo: Seletor de Atributo com Valor Específico

[attribute="value"] {
  /* Estilos CSS */
}

Para selecionar todos os elementos <img> com um valor de atributo alt de "logo", use:

Exemplo: Selecionando Elementos com Atributo alt Específico

img[alt="logo"] {
  /* Estilos CSS */
}

Alguns seletores de atributos comuns incluem:

  • [class]: Seleciona elementos com uma classe.
  • [id]: Seleciona elementos com um id.
  • [type]: Seleciona tipos de input.
  • [disabled]: Seleciona elementos desativados.
  • [required]: Seleciona elementos obrigatórios.

Exemplos de uso desses seletores:

Exemplo: Seletores de Atributos Específicos

/* Seleciona todos os elementos input com type "text" */
input[type="text"] {
  /* Estilos CSS */
}

/* Seleciona todos os elementos com um atributo "data-toggle" */
[data-toggle] {
  /* Estilos CSS */
}

/* Seleciona todos os elementos com um "title" contendo "example" */
[title*="example"] {
  /* Estilos CSS */
}

Os seletores de atributos oferecem uma maneira de selecionar e estilizar partes específicas da sua página web com base em seus atributos.

Tipos de Seletores de Atributo

Os seletores de atributo CSS vêm em vários tipos, cada um com sua própria sintaxe e propósito. Aqui estão os diferentes tipos de seletores de atributo e como usá-los.

Seletor de Presença

O seletor de presença seleciona elementos que têm um atributo específico, independentemente do seu valor. A sintaxe para o seletor de presença é:

Exemplo: Sintaxe para seletor de presença

[attribute] {
  /* Estilos CSS */
}

Para selecionar todos os elementos <a> que têm um atributo title:

Exemplo: Selecionar todos os elementos <a> com um atributo title

a[title] {
  /* Estilos CSS */
}

Este seletor corresponderá a qualquer elemento <a> com um atributo title, não importa qual seja o valor do atributo.

Seletor de Igualdade

O seletor de igualdade seleciona elementos com um valor de atributo igual a um valor específico. A sintaxe para o seletor de igualdade é:

Exemplo: Sintaxe para seletor de igualdade

[attribute="value"] {
  /* Estilos CSS */
}

Para selecionar todos os elementos <input> com um valor de atributo type de "submit":

Exemplo: Selecionar todos os elementos <input> com type='submit'

input[type="submit"] {
  /* Estilos CSS */
}

Por padrão, o seletor de igualdade é sensível a maiúsculas e minúsculas. Para realizar uma correspondência insensível a maiúsculas e minúsculas, adicione um i antes do colchete de fechamento:

Exemplo: Seletor de igualdade insensível a maiúsculas e minúsculas

[attribute="value" i] {
  /* Estilos CSS */
}

Seletores de Substring

Seletores de substring selecionam elementos com um valor de atributo contendo uma substring específica. Existem três tipos de seletores de substring:

  1. Seletor Começa com ([attribute^="value"]): Seleciona elementos com um valor de atributo começando com o valor especificado.
  2. Seletor Termina com ([attribute$="value"]): Seleciona elementos com um valor de atributo terminando com o valor especificado.
  3. Seletor Contém ([attribute*="value"]): Seleciona elementos com um valor de atributo contendo o valor especificado em qualquer lugar dentro da string.

Exemplos de cada seletor de substring:

Exemplo: Selecionar com atributo começando com valor

[data-category^="top"] {
  /* Estilos CSS */
}

Exemplo: Selecionar com atributo terminando com valor

[href$=".pdf"] {
  /* Estilos CSS */
}

Exemplo: Selecionar com atributo contendo valor

[class*="featured"] {
  /* Estilos CSS */ 
}

Seletores de Sufixo e Prefixo

Seletores de sufixo e prefixo são semelhantes aos seletores de substring começa-com e termina-com, mas correspondem a valores inteiros em vez de apenas partes.

  • Prefixo: [attribute|='value']: Corresponde a atributos iguais ou começando seguidos por hífen (-).
  • Sufixo: Não suportado em CSS

Exemplo:

Exemplo: Seletor de prefixo para idiomas

/* Corresponde a lang='en' ou começa com 'en-'*/ 
 [lang|='en'] {   
   /* Estilos CSS */
 }

Combinando Seletores de Atributo

Você pode usar vários seletores de atributo juntos para selecionar elementos específicos com base em mais de um atributo. Isso permite seleções precisas e complexas. Você também pode combinar seletores de atributo com outros seletores CSS, como seletores de classe, id ou elemento.

Para combinar seletores de atributo, escreva-os um após o outro dentro do mesmo seletor:

Exemplo: Combinando Seletores de Atributo

[attribute1][attribute2] {
  /* Estilos CSS */
}

Para selecionar todos os elementos <input> com um atributo type de "text" e um atributo required:

Exemplo: Selecionando Elementos Input Específicos

input[type="text"][required] {
  /* Estilos CSS */
}

Você também pode misturar seletores de atributo com outros seletores CSS.

Exemplo: Misturando Seletores de Atributo com Seletores de Classe

a.button[data-type="primary"] {
  /* Estilos CSS */
}

Aqui estão mais alguns exemplos de combinações complexas:

Exemplo: Selecionando Elementos com Múltiplos Atributos

/* Seleciona elementos <img> com um atributo "data-src" e um atributo "alt" contendo "avatar" */
img[data-src][alt*="avatar"] {
  /* Estilos CSS */
}

/* Seleciona elementos <div> com um atributo "role" de "alert" e um "data-type" começando com "warning" */
div[role="alert"][data-type^="warning"] {
  /* Estilos CSS */
}

/* Seleciona elementos <a> com um "href" terminando em ".pdf" e um "target" de "_blank" */
a[href$=".pdf"][target="_blank"] {
  /* Estilos CSS */
}

Ao combinar esses métodos, você pode criar seleções muito específicas para aplicar estilos a elementos com base em certos atributos. Isso oferece flexibilidade e controle sobre o estilo da sua página.

Aplicações Práticas

Os seletores de atributo têm muitos usos no desenvolvimento web. Eles permitem estilizar elementos com base em seus atributos, facilitando direcionar elementos específicos sem adicionar classes ou IDs extras. Aqui estão alguns exemplos de como os seletores de atributo podem ser usados:

Estilizando Elementos de Formulário

Os seletores de atributo são comumente usados para estilizar elementos de formulário com base em seus atributos.

Exemplo: Estilizando campos de formulário obrigatórios

input[required], 
textarea[required] {
  border: 1px solid red;
}

Você também pode estilizar elementos de formulário com base em seu tipo:

Exemplo: Estilizando elementos de formulário por tipo

input[type="text"] {
  background-color: #f0f0f0;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

Direcionando Atributos de Dados Personalizados

O HTML5 introduziu atributos de dados personalizados, que permitem armazenar informações extras nos elementos. Você pode usar seletores de atributo para direcionar esses atributos personalizados e aplicar estilos com base em seus valores.

Exemplo: Estilizando atributos de dados personalizados

<div data-theme="dark">Modo Escuro</div>
<div data-theme="light">Modo Claro</div>
[data-theme="dark"] {
  background-color: #333;
  color: white;
}

[data-theme="light"] {
  background-color: white;
  color: #333;
}

Internacionalização

Os seletores de atributo podem ser usados para estilizar elementos com base no atributo lang, que especifica o idioma do conteúdo do elemento. Isso é útil para sites que suportam múltiplos idiomas.

Exemplo: Estilizando com base no idioma

[lang|="en"] {
  font-family: "English Font", sans-serif;
}

[lang|="ja"] {
  font-family: "Japanese Font", serif.
}

Melhores Práticas

Ao usar seletores de atributos em seu CSS, siga algumas práticas recomendadas para manter seu código eficiente e fácil de manter. Aqui estão algumas dicas:

Escreva Seletores Eficientes

Embora os seletores de atributos sejam úteis, o uso excessivo pode levar a um CSS complexo e ineficiente. Use-os com moderação e combine-os com classes ou outros seletores mais simples quando possível.

Exemplo: Escreva Seletores Eficientes

/* Menos eficiente */
[data-type="button"][data-size="large"][data-color="primary"] {
  /* estilos */
}

/* Mais eficiente */
.btn-lg-primary {
  /* estilos */
}

Evite o Uso Excessivo

Evite usar seletores de atributos para estilizar um grande número de elementos. Aplicar estilos a elementos como [class] ou [href] pode corresponder a muitos elementos e deixar sua página lenta. Em vez disso, use seletores mais específicos ou classes.

Exemplo: Evite o Uso Excessivo

/* Evite isso */
[href] {
  color: blue;
}

/* Em vez disso, use uma classe ou um seletor mais específico */
a {
  color: blue;
}

Considere a Especificidade

Seletores de atributos têm maior especificidade do que seletores de classe, pseudo-classe ou elemento, mas menor especificidade do que IDs. Isso significa que os estilos aplicados com seletores de atributos podem ser difíceis de sobrescrever.

Para gerenciar a especificidade, tente usar seletores de atributos em combinação com classes em vez de usá-los sozinhos. Isso torna seus estilos mais modulares e fáceis de trabalhar.

Exemplo: Considere a Especificidade

/* Maior especificidade, mais difícil de sobrescrever */
[type="text"] {
  border: 1px solid black;
}

/* Menor especificidade, mais modular */
.text-input[type="text"] {
  border: 1px solid black;
}