Como e por que usar seletores de atributos no CSS

O seletor de atributos CSS é uma técnica definitiva que oferece uma maneira eficiente de estilizar elementos HTML. Neste artigo, vamos aprender sobre seletores de atributos, abrangendo o que são, onde são necessários e como eles se comparam aos seletores básicos do CSS. Vamos começar!

Lista de conteúdo:

O que é um seletor de atributos?
seletor [atributo]
seletor [atributo="valor"]
seletor [atributo~="valor"]
seletor [atributo|="valor"]
seletor [atributo^="valor"]
seletor [atributo$="valor"]
seletor [atributo*="valor"]
Seletores básicos do CSS vs seletores de atributos do CSS

O que é um seletor de atributos?

Todos os elementos HTML têm propriedades associadas a eles chamadas de atributos, que ajudam a definir as características do elemento. Com seletor de atributos, você pode estilizar efetivamente vários elementos com base em seus respectivos atributos. Por exemplo, um elemento div pode ter um atributo ID. Um atributo é composto por duas partes, o nome e o valor:

<div id ="main-content">
  <p>Este é um exemplo rápido de atributos</p>
</div>

Como o nome sugere, a funcionalidade principal de um seletor de atributos é selecionar elementos com base em seus atributos ou valor de atributo. O exemplo abaixo seleciona todos os elementos <a> com o atributo href:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Seletor de Atributos CSS</title>
    <style type="text/css">
      a[href] {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Exemplo de Seletor de Atributos</h1>
    <span>Lista de continentes</span>
    <ul>
      <li><a href="http://www.europe.com">Europa</a></li>
      <li><a href="http://www.asia.com">Ásia</a></li>
      <li><a target="_blank" href="http://www.africa.com">África</a></li>
      <li>América do Norte</li>
      <li>América do Sul</li>
      <li><a href="http://www.australia.com">Austrália</a></li>
      <li><a target="_blank" href="http://www.antartica.com">Antártida</a></li>
    </ul>
  </body>
</html>

No exemplo acima, todos os elementos com o atributo href aparecem em vermelho. Agora, vamos discutir vários tipos diferentes de seletor de atributos e explorar os benefícios que eles oferecem quando usados no CSS.

seletor [atributo]

Nós usamos o seletor [atributo] para selecionar um elemento com um atributo específico. No exemplo a seguir, o seletor [atributo] seleciona todos os elementos <a> com um atributo target:

a[target="_blank"] {
  background-color: grey;
}

seletor [atributo="valor"]

O seletor [atributo="valor"] nos permite selecionar elementos com um atributo específico e um valor específico:

[title="shoppinglist"] {
  background-color: yellow;
}

No exemplo acima, [atributo="valor"] seleciona todos os elementos com um atributo title e um valor de atributo de shoppinglist.

seletor [atributo~="valor"]

Com o seletor [atributo~="valor"], é possível selecionar elementos com um valor de atributo que contenha uma palavra específica.

No exemplo a seguir, selecionamos todos os elementos com um atributo title que contém uma lista de palavras separadas por espaços, uma das quais é "fruit":

[title~="fruit"] {
  border: 7px solid yellow;
}

O exemplo acima corresponderá a elementos com title="fruit", title="orange fruit" e title="fruit basket", mas não a title="a-fruit" ou title="fruits".

seletor [atributo|="valor"]

Usamos o seletor [atributo|="valor"] para direcionar elementos com um valor de atributo especificado ou elementos com o valor especificado seguido de um hífen, -.

Lembre-se de que o valor deve ser uma única palavra, como class="south", ou a palavra seguida de um hífen -, por exemplo, class="south-east". Para referência, considere o exemplo abaixo:

[class|="south"] {
  background: green;
}

seletor [atributo^="valor"]

Com o seletor [atributo^="valor"], selecionamos elementos cujo valor começa com o atributo especificado. Por exemplo, [attribute^="value"] seleciona todas as tags <a> cujos atributos href têm valores iniciais de http:

a[href^="http"]{
  colour :green;
}

Lembre-se de que o valor especificado não precisa ser uma palavra inteira.

seletor [atributo$="valor"]

O seletor [atributo$="valor"] seleciona um elemento com base no final do valor do atributo. Portanto, podemos especificar uma palavra e selecionar elementos com atributos que terminam com o valor especificado.

No código abaixo, selecionamos todas as tags <a> com atributos href que têm um valor que termina com .pdf:

a[href$=".pdf"]{
  color: pink;
}

seletor [atributo*="valor"]

Usamos o seletor [atributo*="valor"] para selecionar elementos cujo valor do atributo contém um valor específico. No exemplo abaixo, o seletor [atributo*="valor"] seleciona todos os elementos com um atributo de classe e valor que contém "room":

[class*="room"] {
  background: yellow;
}

Seletores básicos do CSS vs seletores de atributos do CSS

Agora que estamos familiarizados com os vários seletores de atributos CSS, vamos demonstrar como eles se comparam aos seletores básicos de CSS para estilizar as propriedades de um item em uma página da web.

Suponha que tenhamos a seguinte lista de links que precisamos estilizar categoricamente:

<div class="links">
  <a href="http://amy.com/section">Abrir Site</a>
  <a href="https://amy.com/private_section">Site Privado</a>
  <a href="docs/amy.pdf">Meus Documentos</a>
  <a href="http://amy.com/files/data.xml">Meus Arquivos XML</a>
</div>

Sem o seletor de atributos, estamos um pouco limitados em até onde podemos ir com a estilização das propriedades de cada lista:

.links a {
  padding: 15px 20px;
  margin: 0 20px;
  font-weight: bold;
  text-decoration: none;
}

Os seletores de atributos CSS nos permitem fazer muito mais. Por exemplo, suponha que queiramos atribuir a todos os links que possuem um href começando com https um tamanho de fonte de 50px. Podemos conseguir isso usando o seletor "começa com". Aplique o estilo com o seguinte código CSS:

a[href^="https"] {
  font-size: 50px;
}

O link "Private Site" é o único link que tem um tamanho de fonte de 50px porque é o único link que tem um atributo href com um valor começando com https.

Para alcançar esse mesmo estilo com seletores CSS básicos, o processo seria um pouco mais longo. Primeiro, temos que dar ao link "Private Site" um nome de classe como identificador e, em seguida, estilizar esse nome de classe. Portanto, toda vez que quisermos adicionar um tamanho de fonte personalizado a um link usando seletores CSS básicos, temos que repetir o nome de classe específico para o elemento a. A marcação seria escrita da seguinte forma:

<a href="https://amy.com/private_section" class="increase-fontsize">Site Privado</a>

O CSS ficaria algo como:

.increase-fontsize {
  font-size: 50px;
}

Como outro exemplo, imagine que, a partir da nossa lista de links, queremos estilizar os links com a extensão .pdf para que o texto esteja sublinhado tanto em cima quanto embaixo com linhas onduladas. Graças aos seletores de atributos do CSS, podemos alcançar isso facilmente e evitar repetições desnecessárias no código, usando o seletor que termina com:

a[href$=".pdf"] {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}

Agora, podemos ver que o link com a extensão .pdf está sublinhado acima e abaixo com linhas onduladas.

Mais uma vez, para alcançar esse efeito sem usar seletores de atributos do CSS, teríamos primeiro que anexar um ID ou nome de classe aos links que têm a extensão .pdf e, em seguida, aplicar os estilos escolhidos ao nome de classe ou ID. O código ficaria assim:

<a href="docs/amy.pdf" class="pdf-file">Meus Documentos</a>

Com o estilo apropriado para a classe, o código ficaria assim:

.pdf-file {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}

Conclusão

Os seletores de atributos do CSS podem ser uma ótima ferramenta para personalização em massa de determinados elementos na sua página, visto que sem eles seria necessário definir uma classe e precisaríamos adicionar essa classe em todos os elementos, dessa forma, os seletores de atributos se mostram muito flexíveis visto que evitamos redundâncias em nosso código.