Why use an attribute selector to match classes?

css css-selectors
ducin picture ducin · Mar 24, 2013 · Viewed 46.8k times · Source

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's totally the same as:

a.btn

Does it have any impact on mobile browsers or anything else?

Answer

Eric picture Eric · Mar 24, 2013

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.

Related questions

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More
not:first-child selector

I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the …

Read More