Pourquoi utiliser un sélecteur d'attribut pour faire correspondre les classes?

85

J'ai trouvé un exemple de modèles d'e-mails réactifs dans lesquels il existe des sélecteurs CSS tels que les suivants:

a[class="btn"]

Pourquoi cette syntaxe est-elle utilisée si elle est totalement la même que:

a.btn

Cela a-t-il un impact sur les navigateurs mobiles ou autre chose?

css css-selectors ducine
la source
5
@Jevgeni Bogatyrjov: C'est une question totalement différente qui n'est même pas liée au CSS, mais je peux voir comment cela a pu être déroutant à cause du titre incorrect. Je l'ai édité.
BoltClock

Réponses:

142

La []syntaxe est un sélecteur d'attribut .

a[class="btn"]

Cela sélectionnera n'importe quelle <a>balise avec class="btn". Cependant, il ne sélectionnera pas<a> ce qui a class="btn btn_red", par exemple (alors que le a.btnferait). Cela correspond exactement à cet attribut.

Vous voudrez peut-être lire les 30 sélecteurs CSS que vous devez mémoriser . Il est inestimable pour tout développeur Web en devenir.

Eric
la source
mais ça n'a rien à voir avec la réactivité, c'est de la pure syntaxe CSS, non?
ducin
2
@tkoomzaaskz Correct.
Eric
Je suis également tombé sur le même tutoriel ( campaignmonitor.com/guides/mobile/coding ) - il semble étrange qu'ils utilisent cette technique dans un tutoriel. Les tutoriels doivent rendre les choses aussi claires que possible pour les débutants. Surtout quand le .btnsélecteur commun suffirait. Est-ce que je manque quelque chose? Y a-t-il un avantage à cela? Une plus grande spécificité je suppose?
nickspiel
n'y a-t-il pas une nouvelle façon de sélectionner tous les noms de classe en utilisant jQuery et les crochets pour obtenir toutes les classes avec le même préfixe? Quelque chose comme $ (this) .css ("[class ~ = 'btn_']", "red"); La syntaxe peut être incorrecte, mais savez-vous quelle est la syntaxe correcte?
whyoz
1
Ce serait bien si vous mettiez à jour votre réponse pour afficher également les autres types de sélecteurs d'attributs. La recherche de «crochets de sélecteur css» soulève cette question dans une recherche, et il est difficile de rechercher les autres variantes («crochets de sélection de css étoile»).
cimmanon