Seletores CSS - Seletor de atributo
Colaboração: Maurício (Maujor) Samy Silva
Data de Publicação: 27 de outubro de 2017
Seletor de atributo é um tipo de seletor CSS que permite seleção
baseada em um atributo definido para o elemento. A sintaxe de um seletor
de atributo consiste no nome do elemento seguido do sinal colchetes ([ ]
)
e dentro dos colchetes uma expressão. A expressão dentro do colchetes
admite sete sintaxes diferentes e cada uma delas define um tipo de seletor
de atributo, conforme mostrado na tabela seguir:
Seletor | Seleção |
---|---|
E[foo] |
seleciona elementos E com atributo foo |
E[foo = "bar"] |
seleciona elementos E com atributo foo cujo valor é bar |
E[foo ~= "bar"] |
seleciona elementos E com atributo foo cujo valor é uma lista de valores e um deles é bar |
E[foo ^= "bar"] |
seleciona elementos E com atributo foo cujo valor começa com a string bar |
E[foo $= "bar"] |
seleciona elementos E com atributo foo cujo valor termina com a string bar |
E[foo *= "bar"] |
seleciona elementos E com atributo foo cujo valor contém a string bar |
E[foo |= "pt"] |
seleciona elementos E com atributo foo cujo valor é do tipo pt-* ou pt |
Exemplos
p[class]
seleciona todos os elementos parágrafo aos quais foi definido o atributoclass
.p[class="alerta"]
seleciona todos os elementos parágrafo aos quais foi definido o atributoclass
com o valor alertap[class~="alerta"]
seleciona todos os elementos parágrafo aos quais foi definida uma lista de valores para o atributoclass
e um dos valores é alertadiv[id^="ob"]
seleciona todos os elementosdiv
aos quais foi definido o atributoid
com o valor que começa com a string "ob"h1[title$="ir"]
seleciona todos os elementosh1
aos quais foi definido o atributotitle
com o valor que termina com a string "ir"h4[class*="abf"]
seleciona todos os elementosh4
aos quais foi definido o atributoclass
com um valor que contém a string "abf"a[lang|="en"]
seleciona todos os elementosa
aos quais foi definido o atributolang
com um valor que contém a string "en-" ou a string "en"
Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).
No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.