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
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 atributoclasscom o valor alertap[class~="alerta"]seleciona todos os elementos parágrafo aos quais foi definida uma lista de valores para o atributoclasse um dos valores é alertadiv[id^="ob"]seleciona todos os elementosdivaos quais foi definido o atributoidcom o valor que começa com a string "ob"h1[title$="ir"]seleciona todos os elementosh1aos quais foi definido o atributotitlecom o valor que termina com a string "ir"h4[class*="abf"]seleciona todos os elementosh4aos quais foi definido o atributoclasscom um valor que contém a string "abf"a[lang|="en"]seleciona todos os elementosaaos quais foi definido o atributolangcom 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
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comentários