Por que usar um seletor de atributo para corresponder às classes?

Encontrei um exemplo de modelos de e-mail responsivos em que existem seletores CSS como os seguintes:

a[class="btn"]

Por que essa sintaxe é usada se é totalmente igual a:

a.btn

Isso tem algum impacto nos navegadores móveis ou qualquer outra coisa?

css css-selectors

— Ducin
fonte

@Jevgeni Bogatyrjov: Essa é uma questão totalmente diferente, que nem mesmo está relacionada a CSS, mas posso ver como pode ter sido confusa por causa do título incorreto. Eu editei.

— BoltClock

144

A []sintaxe é um seletor de atributo .

a[class="btn"]

Isso selecionará qualquer <a>tag com class="btn". No entanto, ele não selecionará <a>qual tem class="btn btn_red", por exemplo (enquanto selecionaria a.btn). Corresponde exatamente a esse atributo.

Você pode querer ler Os 30 seletores CSS que você deve memorizar . É inestimável para qualquer desenvolvedor da Web em ascensão.

— Eric
fonte

mas não tem nada a ver com responsividade, é pura sintaxe CSS, certo?

— ducin

Também me deparei com o mesmo tutorial ( campaignmonitor.com/guides/mobile/coding ) - parece estranho que eles usem essa técnica em um tutorial. Os tutoriais devem deixar as coisas o mais claras possível para quem está começando. Especialmente quando o .btnseletor comum seria suficiente. Estou sentindo falta de alguma coisa? Existe algum benefício nisso? Maior especificidade, estou supondo?

— nickspiel

não existe uma nova maneira de selecionar todos os nomes de classes usando jQuery e colchetes para obter todas as classes com o mesmo prefixo? Algo como $ (this) .css ("[class ~ = 'btn_']", "vermelho"); A sintaxe pode estar errada, mas você sabe qual é a sintaxe correta?

— whyoz

@whyoz acho que você está procurando [class^='btn_'].

— Eric

Seria ótimo se você atualizasse sua resposta para mostrar os outros tipos de seletores de atributos. Pesquisar por "colchetes seletor css" traz esta questão em uma pesquisa, e é difícil pesquisar por outras variações ("seletor css seletor colchetes estrela").

— cimmanon