É bem simples selecionar um elemento pelo seu atributo com o CSS. Basta adicionar [atributo]. Exemplo: [href] vai selecionar todos os elementos que possuírem o atributo href na página, (geralmente esses elementos são as tags a).
See the Pen eb618afc0d20966124992c963952d92f by Andre Origamid (@origamid) on CodePen.
Isso pode ser muito útil para selecionar elementos que possuem atributos que guardam valores e são manipulados via JavaScript. Como data-, você pode selecionar eles por exemplo com [data-nome].
Você pode selecionar a tag e informar o atributo também, img[alt], vai selecionar todas as tags img com o atributo alt.
img[alt] {
display: block;
}
Esse tipo de seleção começa a ficar mais interessante quando buscamos também os valores dos atributos. É muito simples: a[href=”#”] vai selecionar todas as tags a, que possuem como valor do atributo href o #.
a[href="#"] {
color: green;
}
Essa seleção pode ficar ainda mais interessante se usarmos alguns caracteres especiais antes do igual. Nessa postagem vamos falar o ^.
Com o ^= você vai selecionar todos os elementos na página com valores que comecem com o que estiver entre aspas.
Exemplo: a[href^=”#”] vai seleciona todas as tags a com valores de href que comecem com #. Isso é muito útil quando você deseja por exemplo selecionar apenas os links internos de um página. Geralmente links internos possuem como valor de href=”#iddotarget” e esse tipo de seleção irá selecionar todos eles.
a[href=^"#"] {
color: pink;
}
Outro exemplo seria uma seleção de todos os links seguros da página. a[href^=”https”], vai selecionar apenas aqueles que estiverem linkando para páginas com o protocolo https.