Seletores de Atributos no CSS

1. Tipos de seletores de atributos

Seletores de atributos no CSS permitem selecionar elementos HTML com base nos valores de seus atributos, como id, class, name, type, entre outros. Eles oferecem flexibilidade e precisão na escolha de elementos, o que é útil especialmente para estilizar elementos de formulários, links e outros elementos com atributos únicos. Neste artigo, vamos explorar os diferentes tipos de seletores de atributos e seus usos.

Os seletores de atributos são divididos em várias categorias, que permitem selecionar elementos com base na presença de um atributo, seu valor exato ou parte dele. Principais tipos de seletores de atributos:

1. Seletor de atributo: seleciona elementos que possuem um determinado atributo, independente do valor.
2. Seletor de atributo com valor: seleciona elementos cujo atributo é igual ao valor especificado.
3. Seletor de atributo com valor inicial: seleciona elementos cujo valor do atributo começa com o prefixo especificado.
4. Seletor de atributo com valor final: seleciona elementos cujo valor do atributo termina com o sufixo especificado.
5. Seletor de atributo que contém um valor: seleciona elementos cujo valor do atributo contém uma substring específica.
6. Seletor de atributo com separação por espaço: seleciona elementos com um atributo cujo valor contém uma palavra específica separada por espaços.
7. Seletor de atributo com separação por hífen: seleciona elementos com um atributo cujo valor contém uma palavra específica separada por hífens.

2. Seletor de atributo (Attribute Selector)

O seletor de atributo seleciona elementos que possuem um atributo específico, independente do valor. Este seletor é útil quando precisamos selecionar todos os elementos com um atributo específico.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

Neste exemplo, todos os elementos <input> com o atributo type receberão uma borda preta, independente do valor deste atributo.

3. Seletor de atributo com valor

O seletor de atributo com valor seleciona elementos cujo atributo é igual a um valor específico. Isso é útil quando precisamos selecionar elementos com um valor específico de atributo, como todos os campos de texto ou links que abrem em uma nova aba.

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

    
<input type="text">
<input type="password">
<input type="email">
    
  

Aqui, apenas o campo de texto <input type="text"> terá um fundo cinza-claro.

4. Seletor de atributo com valor inicial

O seletor de atributo com valor inicial seleciona elementos cujo valor do atributo começa com um prefixo específico. O prefixo é especificado após o símbolo ^=. Este seletor é útil, por exemplo, para selecionar todos os links que direcionam para um determinado site.

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

    
<a href="https://example.com/page1">Link para o site example.com</a>
<a href="https://another.com">Outro link</a>
    
  

Apenas o primeiro link será colorido de verde, pois começa com "https://example.com".

5. Seletor de atributo com valor final

O seletor de atributo com valor final seleciona elementos cujo valor do atributo termina com um sufixo específico. O sufixo é especificado após o símbolo $=. Este seletor é útil para selecionar arquivos de um determinado tipo, como imagens no formato .png.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Imagem 1">
<img src="image2.jpg" alt="Imagem 2">
    
  

Aqui, apenas a imagem com a extensão .png terá uma borda azul.

6. Seletor de atributo que contém um valor

O seletor de atributo que contém um valor seleciona elementos cujo valor do atributo contém uma substring específica. A substring é especificada após o símbolo *=. Este seletor é útil quando precisamos selecionar elementos com um atributo que contém uma parte específica do valor, como links para uma seção específica do site.

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

    
<a href="https://example.com/section1">Link para a seção 1</a>
<a href="https://example.com/about">Sobre nós</a>
<a href="https://example.com/section2">Link para a seção 2</a>
    
  

Apenas links que contêm "section" em seu href serão destacados em negrito.