Question

I’m wondering what the specificity of the attribute selector is. For example:

• Id = 100 points
• Class = 10 points
• Html Tag= 1 point

Example:

/* this specificity value is 100 + 10 + 1 = 111 */
#hello .class h2 { }

With this HTML:

<div class="selectform">
<input type="text" value="inter text">
<input type="text" value="inter text" class="inputag">
</div>

Which of these 2 selectors is more specific?

.selectform input[type="text"] { }
.selectform .inputbg { }

Check to demo http://tinkerbin.com/IaZW8jbI

Answer 1

Attribute selectors are equally specific to class selectors.

In your example, the first selector is more specific because there is an additional type selector input that causes it to beat the second selector.

The specificity of each selector is calculated as follows:

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */
.selectform input[type="text"] { }

/* 2 classes                    -> specificity = 0-2-0 */
.selectform .inputbg { }