O seletor de atributo em CSS é uma ferramenta poderosa que permite direcionar elementos HTML com base em seus atributos. Isso significa que você pode aplicar estilos a elementos que possuem atributos específicos ou até certos valores para esses atributos. É particularmente útil quando você quer estilizar elementos dinamicamente ou quando apenas os nomes das classes não fornecem especificidade suficiente. Por exemplo, você pode usar o seletor de atributo para direcionar todos os links que possuem um atributo href. Isso é especialmente útil quando você quer aplicar um estilo uniforme a todos os links em uma página. Aqui está como você pode usar o seletor de atributo para direcionar links com o atributo href:

<link rel="stylesheet" href="styles.css">
<a href="https://example.com">Example link with an href attribute</a>
<a>Example link without an href attribute</a>

a {
  display: block;
}

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

Esta regra CSS aplicará uma cor azul e um sublinhado a qualquer link que inclua um atributo href, garantindo que todos os links clicáveis sejam estilizados de forma consistente. Mas seletores de atributo podem ser mais específicos. Suponha que você queira direcionar apenas os links que possuem um atributo title. O atributo title frequentemente fornece informações adicionais sobre o link e você pode querer estilizar esses links de forma diferente para indicar que eles têm informações extras disponíveis. Here's how you can do it:

<link rel="stylesheet" href="styles.css">
<a href="https://example.com" title="Example link with a title attribute">Example link with a title attribute</a>
<a>Example link without a title or href attribute</a>

a {
  display: block;
}

a[title] {
  font-weight: bold;
  text-decoration: none;
}

Esta regra aplica texto em negrito e remove o sublinhado de qualquer link com um atributo title. É uma ótima maneira de diferenciar visualmente esses links dos outros na página. Você também pode combinar seletores de atributo para obter resultados ainda mais precisos. Por exemplo, se você quiser estilizar links que tenham os atributos href e title, você pode fazer assim:

<link rel="stylesheet" href="styles.css">
<a href="https://example.com" title="Example link with a title attribute">Example link with a title attribute</a>
<a>Example link without a title or href attribute</a>

a {
  display: block;
}

a[href][title] {
  display:block;
  color: green;
}

Neste caso, apenas links que contenham os atributos href e title serão estilizados com texto verde. Esse nível de controle é o que torna os seletores de atributo tão poderosos no CSS. Outro exemplo para um seletor de atributo é corresponder a um único valor dentro de uma lista de valores separados por espaço em um atributo. Aqui está um exemplo de um elemento anchor com múltiplas classes:

<a href="https://example.com" class="btn primary large">Visit Example Site</a>

Para direcionar este elemento de âncora específico, você pode usar o seguinte seletor:

<link rel="stylesheet" href="styles.css">
<a href="https://example.com" class="btn primary large">Visit Example Site</a>

a[class~="primary"] {
  color: red;
  font-weight: bold;
}

A sintaxe [attr~=value] é usada aqui para selecionar todos os elementos anchor onde o atributo class contém a palavra "primary". Se você precisa direcionar um elemento onde o valor do atributo é prefixado por um valor específico, então você pode usar a sintaxe [attr^=value]. Aqui está um exemplo:

<link rel="stylesheet" href="styles.css">
<a href="https://example.com" class="btn primary large">Visit Example Site</a>

a[href^="https://"] {
  color: green;
  text-decoration: underline;
}

Neste exemplo, o seletor a[href^="https://"] irá selecionar todos os elementos anchor onde o valor do atributo href começa com "https://" . Para direcionar elementos onde o valor do atributo termina com um valor específico, você pode usar a sintaxe [attr$=value]. Aqui está um exemplo:

<link rel="stylesheet" href="styles.css">
<a href="https://example.com">Visit Example Site</a>

a[href$=".com"] {
  color: darkgreen;
  text-decoration: underline dotted;
}

Neste exemplo, o seletor a[href$=".com"] irá selecionar todos os elementos anchor onde o valor do atributo href termina com .com. Usar seletores de atributo não só melhora o estilo da sua página web como também aprimora a acessibilidade tornando elementos interativos como links mais distinguíveis com base em seus atributos.