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

86

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
5
@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

Respostas:

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
1
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