98

I have found an example of responsive email templates where there are such CSS selectors such as the following:

a[class="btn"]

Why is this syntax used if it could be replaced with the simpler:

a.btn

Does it have any impact on mobile browsers or anything else? Are there email clients that require this usage?

Improve this question
0

2 Answers 2

Reset to default
156

The [] syntax is an attribute selector.

a[class="btn"]

This will select any <a> tag with class="btn". However, it will not select <a> which has class="btn btn_red", for example (whereas a.btn would). It only exactly matches that attribute.

You may want to read The 30 CSS Selectors you Must Memorize. It's invaluable to any up-and-coming web developer.

Improve this answer
7
  • but it has nothing to do responsiveness, it's pure CSS syntax, right?
    – ducin
    Commented Mar 24, 2013 at 21:28
  • 1
    I also came across the same tutorial (campaignmonitor.com/guides/mobile/coding) - it seems odd that they would use this technique in a tutorial. Tutorials should make things as clear as possible for people starting out. Especially when the common .btn selector would suffice. Am i missing somthing? Is there any benefit to this? Greater specificity I am guessing?
    – nickspiel
    Commented Mar 25, 2014 at 5:29
  • isn't there a new way to select all the class names using jQuery and brackets to get at all classes with the same prefix? Something like $(this).css("[class~='btn_']", "red"); The syntax might be wrong, but do you know what the correct syntax is?
    – whyoz
    Commented Oct 23, 2015 at 15:17
  • @whyoz I think you're looking for [class^='btn_'].
    – Cat
    Commented Oct 23, 2015 at 19:25
  • 1
    It would be great if you updated your answer to show the other types of attribute selectors as well. Searching for "css selector square brackets" brings up this question in a search, and it is difficult to search for the other variations ("css selector square brackets star").
    – cimmanon
    Commented Jan 22, 2016 at 13:23
1
+50

Why use an attribute selector to match classes?

The obvious use case for attribute selector: Specific matches

Exact match =, containing/substring *=, prefix ^=, suffix $=, etc.

Yahoo Mail Hack

  • You want to support beta versions of Yahoo Mail
  • You have media queries

Normally apps made before media queries just ignore the whole block - not beta yahoo mail, which just applies all the styles ignoring the media query. It doesn't support attribute selectors though...

For this case you can use attribute selectors to select a class within a media query so that the media query works on most email clients but doesn't trigger media query styles on beta versions of yahoo mail.

read more here

Caniemail data on the attribute-selector having much less support than the class selector.

Improve this answer
6
  • 1
    Older versions of Yahoo Mail were the reason attribute selectors were used, but apparently that is no longer required, which I will try to verify. litmus.com/community/discussions/…
    – BBaysinger
    Commented Mar 24, 2022 at 7:13
  • 1
    @BBaysinger OH This is making a lot more sense now, I am going to update the answer, thank you!
    – Zach Jensz
    Commented Mar 24, 2022 at 8:58
  • @BBaysinger I have updated the answer to include yahoo mail
    – Zach Jensz
    Commented Mar 24, 2022 at 9:12
  • It doesn't seem like your statement on Yahoo Mail is consistent with the explanation in the link I provided.
    – BBaysinger
    Commented Mar 24, 2022 at 9:29
  • @BBaysinger Can you be more specific? I linked an article that seemed to go into more detail than yours, reading yours again and don't know what's inconsistent
    – Zach Jensz
    Commented Mar 24, 2022 at 9:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.