属性选择器vs类选择器的样式

Question

Many times I see code like this:

<input type="text"   class="class1" name="text">
<input type="submit" class="class2" name="submit">

that then gets styled like this:

input[type=text]   { styles here...}
input[type=submit] { styles here...}

Why not use the class selector directly ("class1" and "class2" in this example)?

Is this way of styling more cross-browser-y? (AFAIK attr selectors don't work in IE6)

Is it faster?

Has it anything to do with some best practice I am not aware of?

Thank you!

Answer 1

In 2014, the only situation in which cross-browser support for attribute selectors is an issue is if you're still working on legacy code that relies on quirks mode IE or generally older versions of the browser. You are correct in that attribute selectors don't work on IE6. ¹

If the purpose of "class1" is to identify only input[type=text] elements, and "class2" to identify only input[type=submit] elements, then there is no difference between using a class selector and using an attribute selector. ² If you are working with legacy code, then using classes in lieu of attributes is fine. Otherwise, unless you're using the classes for some other purpose like a script, they're superfluous.

Which is faster? Who knows? Browsers are known to have specific optimizations for rules with lone class selectors, but whether that translates to actual time saved is another issue, one that's not worth considering unless selectors really are your bottleneck.

---

¹ _{People keep pointing out specifically that attribute selectors work on IE7 and IE8 only when you include a doctype for some reason. That applies to pretty much every version of IE anyway, and honestly, if you're not already using a doctype, then you probably have a very good reason for it, in which case you shouldn't even be considering using any modern CSS features.}

² _{It's worth noting that if you simply select .class1 rather than input.class1 you will lose the specificity of the input selector.}