De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

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

  1. p[class] seleciona todos os elementos parágrafo aos quais foi definido o atributo class.

  2. p[class="alerta"] seleciona todos os elementos parágrafo aos quais foi definido o atributo class com o valor alerta

  3. p[class~="alerta"] seleciona todos os elementos parágrafo aos quais foi definida uma lista de valores para o atributo class e um dos valores é alerta

  4. div[id^="ob"] seleciona todos os elementos div aos quais foi definido o atributo id com o valor que começa com a string "ob"

  5. h1[title$="ir"] seleciona todos os elementos h1 aos quais foi definido o atributo title com o valor que termina com a string "ir"

  6. h4[class*="abf"] seleciona todos os elementos h4 aos quais foi definido o atributo class com um valor que contém a string "abf"

  7. a[lang|="en"] seleciona todos os elementos a aos quais foi definido o atributo lang 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.

Saiba mais: Facebook , Twitter.

Adicionar comentário

* Campos obrigatórios
5000
Powered by Commentics

Comentários

Nenhum comentário ainda. Seja o primeiro!


Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva