você está aqui: Home  → Arquivo de Mensagens

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.



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

 

 

Opinião dos Leitores

Maujor
27 Out 2017, 12:45
Obrigado e abração @Fernando
Fernando "Eagle" de Sousa
27 Out 2017, 10:34
Excelente material, aliás sou suspeito pra falar visto que sou grande admirador do trabalho do Maurício Samy.
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script