24

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

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Rohit Azad Malik
  • 29,262
  • 15
  • 57
  • 87
  • 2
    Specificity isn't counted in "points" the way you think it is: http://stackoverflow.com/questions/2809024/points-in-css-specificity – BoltClock Jul 10 '12 at 05:17
  • check to demo http://tinkerbin.com/IaZW8jbI – Rohit Azad Malik Jul 10 '12 at 05:19
  • 1
    you might like to read the start of [this article](http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/) by smashing magazine which explains how specificity works – stephenmurdoch Jul 10 '12 at 05:23
  • `.selectform input[type="text"]` has a specificity of `2-1` (a class `1-0`, a tag `1` and an attribute `1-0`), while `.select-form .inputbg` has a specificty of `2-0` (two classes). A `2-0` can't override a `2-1`. If they were equal (i.e: `.selectform input.inputbg`), the last one would have been applied. – tao Mar 06 '21 at 00:34

3 Answers3

27

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 { }
BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • 6
    Interesting, as `#foo {}` has a specificity of 1-0-0 while `[id="foo"] {}` selects the same element but has a *much* lower specificity of 1-0. – chharvey Jul 24 '14 at 18:37
  • @chharvey: Correct - that's because CSS itself does not have any mappings from ID/class selectors to any particular attribute, so any attribute selector will have the same specificity regardless of attribute name. This mapping is performed by the browser according to document semantics, not CSS semantics. It just so happens that attribute and class selectors share the same specificity (most likely to keep things simple). – BoltClock Jul 24 '14 at 18:53
0

In general, all types of selectors are the same; what matters is the number of selectors in the expression. So ID = 1, class = 1, and HTML tag = 1.

In the event that two selectors have the same specificity, the one that is further down in the CSS file "wins". So make sure you order your CSS references from the general to the specific; libraries like jquery-ui.css go first, while your CSS files go after those.

Anthony Mills
  • 8,416
  • 3
  • 25
  • 50
  • Just to add: these are mostly known as "simple selectors". In a selector, only simple selectors and pseudo-elements are considered for specificity, not combinators. In a comma-separated group, the specificity is calculated separately for each part of the selector group. – BoltClock Jul 10 '12 at 05:26
0

As someone said earlier in this post "attribute selectors have the same specificity as classes"...i find that not to be true from my experiences... i have used a class name after say an input[type="text"] and it would not override the previous CSS. It's counter-intuitive since input[type="text"] sounds quite broad . You have to use an ID to override which if you are doing inputs for forms you should have an ID on there anyways to properly connect labels.

  • A class selector has a `1-0` specificity, equal to an attribute selector. But `input[type="text"]` has a specificity of `1-1` (`1-0` from the attribute and `1` from the tag), and it can't be overridden by a `1-0` specificity. To override it, you need at least `1-1` (i.e: `input.your-class`). – tao Mar 06 '21 at 00:07