Detalhamento do Seletor de Atributo CSS

O CSS 2 introduziu o seletor de atributo.

O seletor de atributo pode selecionar elementos com base nas propriedades e valores dos atributos do elemento.

Seletor de atributo simples

Se você desejar selecionar elementos com um determinado atributo, independentemente do valor do atributo, você pode usar o seletor de atributo simples.

Exemplo 1

Se você quiser tornar todos os elementos que contêm um título (title) vermelhos, você pode escrever:

*[title] {color:red;}

Experimente pessoalmente

Exemplo 2

Da mesma forma que o anterior, você pode aplicar estilos apenas aos elementos "a" com atributo "href":

a[href] {color:red;}

Experimente pessoalmente

Exemplo 3

Você pode fazer a seleção com base em várias propriedades, basta conectar os seletores de propriedade.

Por exemplo, para definir o texto do link HTML com os atributos href e title em vermelho, você pode escrever assim:

a[href][title] {color:red;}

Experimente pessoalmente

Exemplo 4

Você pode usar algumas técnicas criativas para essa característica.

Por exemplo, você pode aplicar estilos a todas as imagens com a propriedade alt para realçar essas imagens válidas:

img[alt] {border: 5px solid red;}

Experimente pessoalmente

Dica:Este exemplo específico é mais adequado para diagnósticos do que para design, ou seja, para determinar se a imagem realmente é válida.

Exemplo 5: Uso de seletores de atributo em documentos XML

Os seletores de atributo são muito úteis em documentos XML, pois o linguagem XML defende que os nomes dos elementos e atributos sejam especificados com base no uso dos elementos e atributos.

Supondo que tenhamos projetado um documento XML para descrever os planetas do sistema solar. Se quisermos escolher todos os elementos planet element com a propriedade moons e exibi-los em vermelho para chamar mais atenção para os planetas com moons, podemos escrever assim:

planet[moons] {color:red;}

Isso fará com que o texto do segundo e terceiro elementos da seguinte fragmento de marcação seja exibido em vermelho, mas o texto do primeiro elemento não será vermelho:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Verifique o efeito

Seleção com base no valor específico da propriedade

Além de escolher elementos que possuem certas propriedades, você pode ainda mais restringir o escopo da seleção, escolhendo apenas elementos com valores específicos de propriedades.

Exemplo 1

Por exemplo, suponha que você deseje tornar vermelho o link apontando para um documento específico no servidor da Web. Você pode escrever assim:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Experimente pessoalmente

Exemplo 2

Assim como os seletores de atributo simples, você pode ligar vários seletores de atributo-valor para escolher um documento.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Isso tornará o texto do primeiro link dentro da seguinte marcação em vermelho, mas os segundos ou terceiros links não serão afetados:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Experimente pessoalmente

Exemplo 3

Da mesma forma, o linguagem XML também pode usar este método para definir estilos.

Vamos voltar ao exemplo dos planetas. Suponha que você queira selecionar elementos planet que tenham o valor do atributo moons igual a 1:

planet[moons="1"] {color: red;}

O código acima tornará o segundo elemento do seguinte marcador vermelho, mas o primeiro e o terceiro elementos não serão afetados:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Verifique o efeito

O atributo e o valor do atributo devem coincidir completamente

Atenção, este formato requer correspondência completa com o valor do atributo.

Se o valor do atributo contiver uma lista de valores separados por espaços, pode haver problemas na correspondência.

Considere o seguinte fragmento de marcação:

<p class="important warning">Este parágrafo é uma aviso muito importante.</p>

Se for escrito como p[class="important"], essa regra não pode coincidir com o marcador de exemplo.

Para selecionar o elemento com base no valor específico do atributo, é necessário escrever assim:

p[class="important warning"] {color: red;}

Experimente pessoalmente

Seleção com base no valor parcial do atributo

Se precisar selecionar com base em uma palavra específica da lista de palavras do valor do atributo, é necessário usar o traço invertido (~).

Suponha que você queira selecionar elementos que contenham "important" no atributo class, você pode fazer isso com o seletor a seguir:

p[class~="important"] {color: red;}

Experimente pessoalmente

Se o traço invertido for ignorado, isso significa que é necessário fazer correspondência de valor completo.

A diferença entre o seletor de atributo de valor parcial e a notação de nome de classe do ponto

Este seletor é equivalente ao que discutimos na notação de nome de classe do ponto na escolha de classe.

Isso é equivalente a p.important e p[class="important"] quando aplicados ao documento HTML.

Então, por que precisamos do seletor de atributo "~="? Porque ele pode ser usado para qualquer atributo, não apenas para class.

Por exemplo, pode haver um documento que contém muitas imagens, mas apenas algumas delas são imagens. Para isso, pode-se usar um seletor de atributo de parte do documento baseado em title, para selecionar essas imagens:

img[title~="Figure"] {border: 1px solid gray;}

Esta regra escolherá todas as imagens cujo texto do atributo title contenha "Figure". As imagens que não possuem o atributo title ou cujo atributo title não contenha "Figure" não serão correspondidas.

Experimente pessoalmente

Seletor de atributo de correspondência de substring

A seguir, apresento um módulo de seletor mais avançado, lançado após a conclusão do CSS2, que inclui mais partes de seletores de valores parciais. Segundo a norma, deve ser chamado de "seletor de atributo de correspondência de substring".

Muitos navegadores modernos suportam esses seletores, incluindo o IE7.

A tabela a seguir é uma simples resumo desses seletores:

Tipos Descrição
[abc^="def"] Escolher todos os elementos cujo valor do atributo abc comece com "def"
[abc$="def"] Escolher todos os elementos cujo valor do atributo abc termine com "def"
[abc*="def"] Escolher todos os elementos cujo valor do atributo abc contenha a substring "def"

Pode-se pensar em várias aplicações para esses seletores.

Por exemplo, se você quiser aplicar estilos a todos os links que apontam para CodeW3C.com, não é necessário especificar uma classe para todos esses links e, em seguida, escrever estilos com base nessa classe. Basta escrever as seguintes regras:

a[href*="codew3c.com"] {color: red;}

Experimente pessoalmente

Dica:Qualquer atributo pode usar esses seletores.

Tipos de seletor de atributo específico

Por fim, apresento o seletor de atributo específico. Veja o exemplo a seguir:

*[lang|="en"] {color: red;}

A regra mencionada acima escolherá todos os elementos cujo atributo lang seja igual a en ou comece com en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Experimente pessoalmente

Em geral, [att|="val"] pode ser usado para qualquer atributo e valor.

Suponha que um documento HTML contenha uma série de imagens, onde o nome de arquivo de cada imagem tenha a forma figure-1.jpg e figure-2.jpgCom isso, você pode usar os seguintes seletores para correspondência de todas essas imagens:

img[src|="figure"] {border: 1px solid gray;}

Experimente pessoalmente

Claro, o uso mais comum do seletor de atributo de linguagem é para correspondência de valores de linguagem.

Manual de Referência de Seletor CSS

Seletor Descrição
[attribute] Usado para selecionar elementos que têm um atributo especificado.
[attribute=value] Usado para selecionar elementos que têm um atributo e valor especificados.
[attribute~=value] Usado para selecionar elementos que contêm a palavra especificada no valor do atributo.
[attribute|=value] Usado para selecionar elementos que têm valores de atributo começando com o valor especificado, o valor deve ser uma palavra inteira.
[attribute^=value] Corresponde a cada elemento que começa com o valor especificado no valor do atributo.
[attribute$=value] Corresponde a cada elemento que termina com o valor especificado no valor do atributo.
[attribute*=value] Corresponde a cada elemento que contém o valor especificado no valor do atributo.