How Are the Points in CSS Specificity Calculated

How are the points in CSS specificity calculated

Pekka's answer is practically correct, and probably the best way to think about the issue.

However, as many have already pointed out, the W3C CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.

It turns out that the "very large base" employed (at least by the 4 most commonly-used browsers^*) to implement this standard algorithm is 256 or 2⁸.

What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:

255 classes are not enough to override 1 id
...but 256 classes are enough to override 1 id
...and 256 tag-names are enough to override 1 class-name
...but, alas 256 ids are not enough to override 1 inline style (Updated 2012/8/15 -- you'll have to use !important)

So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:

(2⁸)² or 65536, times the number of ids in the selector

(2⁸)¹ or 256, times the number of class-names in the selector
(2⁸)⁰ or 1, times the number of tag-names in the selector

This isn't very practical for back-of-the-envelop exercises to communicate the concept.

That's probably why articles on the topic have been using base 10.

***** [Opera uses 2¹⁶ (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]

Update, July 2014:

As Blazemonger pointed out earlier in the year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Perhaps 2¹⁶, like Opera? IE and Firefox still use 256.

Update, March 2021:

Firefox no longer uses 256 as a base.

CSS Specificity calculation

This was a doubt which i had faced when i had started working with CSS. But this link will help you.

Good luck learning CSS!

Determining CSS Specificity Score

W3C specification states:

A selector's specificity is calculated as follows:

count the number of ID selectors in the selector (= a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

count the number of type selectors and pseudo-elements in the selector (= c)

ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other,
but the negation itself does not count as a pseudo-class.

Examples:
*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
\#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
\#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Now I will try to make it clear how it is actually implemented. Ie. 10 htmls tags do not equal one class, it goes more like this:

id : class : tag : pseudo-elements

First example:

body div main section div ul li p strong span a {}

Specificity: 0 : 0 : 11 : 0

Second example:

.someClass {}

Specificity: 0 : 1 : 0 : 0

11 elements will win not with one class. Higher tier always wins, so even more than 1000 classes will never beat id (styling with id's is rather bad practice anyway).

Do not forget about cascade. Styles with the same specificity declared later in source file(s) will win in case of conflict. The inline styles will always win with anything, except of !important.

Calculating the specificity of a selector(CSS)

Yep.

Test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
#ID {color:red}
.C1.C2.C3 ... .C220.C221.C222 {color:green}
</style>
</head>
<body>
<div id="ID" class="C1 C2 C3 ... C220 C221 C222">This is a test.</div>
</body>
</html>

The text is red in recent Firefox, Chrome, IE, and Opera browsers.

Calculating specificity of multiple selectors on one rule

I suspect your confusion comes from the assumption that when you group multiple selectors, you can manipulate the specificity of the selectors that are contained within the comma-separated list. This is not true: the comma-separated selector list is simply a shorthand to declare the same styles that are applied to all your selectors.

In other words:

#box1 div.spec2 p,  /* Specificity: 0, 1, 1, 2 */
#box1 #box2 p {     /* Specificity: 0, 2, 0, 1 */
    color: blue;
}

#box1 #box3 p {     /* Specificity: 0, 2, 0, 1 */
    color: green;
}

...is actually equivalent to:

#box1 div.spec2 p { /* Specificity: 0, 1, 1, 2 */
    color: blue;
}

#box1 #box2 p {     /* Specificity: 0, 2, 0, 1 */
    color: blue;
}

#box1 #box3 p {     /* Specificity: 0, 2, 0, 1 */
    color: green;
}

Which of the following has a higher specificity in CSS?

Your question is answered by the CSS3 selectors, W3C Recommendation:

9. Calculating a selector's specificity

A selector's specificity is calculated as follows:

count the number of ID selectors in the selector (= a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

count the number of type selectors and pseudo-elements in the selector (= c)

ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other,
but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large
base) gives the specificity.

With your examples we have:

1) p#largetext has a specificity of 1,0,1 (1 id, 1 type)

body p#largetex has a specificity of 1,0,2 (1 id, 2 types)

2) p.largetext ul li has a specificity of 0,1,3 (1 class, 3 types)

p ul li a has a specificity of 0,0,4 (4 types)

To obtain the value of the specificity you have to concatenate the 3 numbers. So for example 1, the second selector is more specific 102>101 and for example 2, the first selector is more specific 13>4.

Understanding specificity: achieving desired selector outcomes without using !important

A class has a specificity of 10. An element has a specificity of 1.

Therefore, in the first instance:

the .main li a selector has a specificity of 12.
the .active a selector has a specificity of 11

Because they both target the same element, and the former has a higher specificity, the latter loses the battle to style the element.

In the second instance:

the .primary p selector has a specificity of 11.
the .copyright selector has a specificity of 10.

Again, because they both target the same element, and the former has a higher specificity, the latter loses the battle to style the element.

The !important annotation trumps all specificity. Hence, with that applied, .active a and .copyright re-take the elements.

If you want to remove !important, which would be the right thing to do as it's not necessary here, you can instead boost the specificity of the selectors.

An ID has a specificity of 100. So that can quickly move a selector up in priority.

Here are some examples:

.main li a      { color: #7ab2c1; }  /* previous winner; specificity 12 */.main .active a { color: #ff0000; }  /* added class selector; specificity now 21 */.primary p      { font-size: 12px; } /* previous winner; specificity 11 */#copyright      { font-size: 8px;} /* switched to ID selector; specificity now 100 */

<nav class="main">  <ul class="group">    <li class="active"><a href="#">Home</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Contact</a></li>  </ul></nav><footer class="primary">  <p><a href="#">Sign up</a> for our newsletter, it's a racket!</p>  <p id="copyright">Copyright © Sven's Snowshoe Emporium.                    All Rights Reserved.</p></footer>

How does the CSS specificity work?

The first says that any an item with class c inside of any item with of class a will be colored red.

.a .c {
    color: red;
}

The second says that any an item with class c inside of any item of class b will be colored green. It takes precedence over the first rule as it is just as deep as the first rule, but defined after that rule.

.b .c {
    color: green;
}

This says that any item with the class c should be blue. But since it is not as descriptive as the rules above, it does not take precedence. If you have an item with class c that is not nested inside a class a or b, then this rule will take effect.

.c {
    color: blue;
}

So there are two rules to remember:

The more specific rules get higher precedence
The later defined rules get higher precedence than their just-as-specific counterparts.

How to view browser's calculated CSS specificity?

There is a getSpecificity() function available at the inIDOMUtils API in Firefox.

To use this API you'll have to write your own Firefox extension, though. This was requested for Firebug, though Firebug is discontinued now in favor of the Firefox DevTools, which also have a feature request for this.

CSS Specificity - Explanation for margin applied

Refer this: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity

Specificity is basically a measure of how specific a selector is — how many elements it could match. As shown in the example seen above, element selectors have low specificity. Class selectors have a higher specificity, so will win against element selectors. ID selectors have an even higher specificity, so will win against class selectors. The only way to win against an ID selector is to use !important.

The amount of specificity a selector has is measured using four
different values (or components), which can be thought of as
thousands, hundreds, tens and ones — four single digits in four
columns:

Thousands: Score one in this column if the declaration is inside a
style attribute (such declarations don't have selectors, so their
specificity is always simply 1000.) Otherwise 0.
Hundreds: Score one
in this column for each ID selector contained inside the overall
selector.
Tens: Score one in this column for each class selector, attribute
selector, or pseudo-class contained inside the overall selector.
Ones: Score one in this column for each element selector or
pseudo-element contained inside the overall selector.

So, going by the rules the second selector .child-1 has only a classname. Hence the score will be 10

The first selector has a class and an element. So the score will be 11

How Are the Points in CSS Specificity Calculated