Seletores de atributo
Como você sabe de seu estudo de HTML, os elementos podem ter atributos que fornecem mais detalhes sobre o elemento que está sendo marcado. Em CSS, você pode usar seletores de atributo para direcionar elementos com determinados atributos. Esta lição mostrará como usar esses seletores que são muito úteis.
| Pré-requisitos: | Conhecimentos básicos em informática, software básico instalado, conhecimentos básicos de trabalhando com arquivos, Basico de HTML (Estude Introdução para o HTML), e uma ideia de como CSS funciona (Estude CSS primeiros paços.) |
|---|---|
| Objetivo: | Entender o que são seletores de atributo e como usa-los. |
Seletores de Presença e Valor
Esses seletores permitem a seleção de um elemento com base na presença de um atributo sozinho (por exemplo, href) ou em várias correspondências diferentes com o valor do atributo.
| Seletor | Exemplo | Descrição |
|---|---|---|
[attr] |
a[title] |
Corresponde a elementos com um atributo attr (cujo nome é o valor entre colchetes). |
[attr=value] |
a[href="https://example.com"] |
Corresponde a elementos com um atributo attr cujo valor é exatamente value - a string entre aspas. |
[attr~=value] |
p[class~="special"] |
Corresponde a elementos com um atributo attr cujo valor é exatamente value, ou contém valor em sua lista de valores (separados por espaço). |
[attr|=value] |
div[lang|="zh"] |
Corresponde a elementos com um atributo attr cujo valor é exatamente value ou começa com value imediatamente seguido por um hífen. |
No exemplo abaixo você pode ver esses seletores sendo usados.
- usando
li[class]podemos combinar qualquer seletor com um atributo de classe. Isso corresponde a todos os itens da lista, exceto o primeiro. li[class="a"]corresponde a um seletor com uma classe de a, mas não a um seletor com uma classe de a com outra classe separada por espaço como parte do valor. Ele seleciona o segundo item da lista.li[class~="a"]corresponderá a uma classe de a, mas também a um valor que contém a classe de a como parte de uma lista separada por espaços em branco. Ele seleciona o segundo e o terceiro itens da lista.
Seletores de SubString
Esses seletores permitem uma correspondência mais avançada de substrings dentro do valor do seu atributo. Por exemplo, se você tivesse classes de box-warning e box-error e quisesse combinar tudo que começou com a string "box-", você poderia usar [class^="box-"] para selecionar os dois (ou [class|="box"] como descrito abaixo).
| Seletor | Exemplo | Descrição |
|---|---|---|
[attr^=value] |
li[class^="box-"] |
Corresponde a elementos com um atributo attr (cujo nome é o valor entre colchetes), cujo valor começa com valor. |
[attr$=value] |
li[class$="-box"] |
Corresponde a elementos com um atributo attr cujo valor termina com valor. |
[attr*=value] |
li[class*="box"] |
Corresponde a elementos com um atributo attr cujo valor contém o valor em qualquer lugar dentro da string. |
(À parte/lado: pode ser útil notar que ^ e $ há muito são usados como âncoras nas chamadas expressões regulares para significar que começa com e termina com.)
O próximo exemplo mostra o uso desses seletores:
- li [class ^ = "a"] corresponde a qualquer valor de atributo que comece com a, portanto, corresponde aos dois primeiros itens da lista.
- li [class $ = "a"] corresponde a qualquer valor de atributo que termina com a, portanto, corresponde ao primeiro e terceiro item da lista.
- li [class * = "a"] corresponde a qualquer valor de atributo onde a apareça em qualquer lugar na string, portanto, corresponde a todos os itens da nossa lista
Sensibilidade à maiúsculas
Se você deseja combinar valores de atributo sem distinção entre maiúsculas e minúsculas, você pode usar o valor i antes do colchete de fechamento. Este sinalizador informa ao navegador para corresponder caracteres ASCII sem distinção entre maiúsculas e minúsculas. Sem o sinalizador, os valores serão correspondidos de acordo com a distinção entre maiúsculas e minúsculas do idioma do documento - no caso do HTML, será sensível a maiúsculas e minúsculas.
No exemplo abaixo, o primeiro seletor corresponderá a um valor que começa com um - ele corresponde apenas ao primeiro item da lista porque os outros dois itens da lista começam com um A maiúsculo. O segundo seletor usa o sinalizador que não diferencia maiúsculas de minúsculas e, portanto, corresponde a todos os itens da lista.
Nota: Há tambem um valor mais novo s, que forçará a correspondência com distinção entre maiúsculas e minúsculas em contextos em que a correspondência normalmente não diferencia maiúsculas de minúsculas; no entanto, isso não é bem suportado em navegadores e não é muito útil em um contexto HTML.
Próximos passos
Agora que terminamos com os seletores de atributo, você pode continuar no próximo artigo e ler sobre pseudo-class and pseudo-element selectors (en-US).