Why can't I beat an ID with multiple classes? [duplicate]

Question

Possible Duplicate:
Points in CSS specificity

Here's an example of what I mean:

http://jsfiddle.net/BTJXt/9/

Somehow 1 ID will beat a seemingly infinite number of classes. How is this being calculated?

<style>
    div {
    height:200px;
    width:200px;
    }

    #big .little {
    /* Specificy value = 110 */
    background-color:red;
    }

     #big .little.little {
    /* Specificy value = 120 */
    background-color:blue;
    }

    .little.little.little.little.little.little.little.little.little.little.little.little.little {
    /* Specificy value = 130, why doesn't this win? */
    background-color:green;
    }


</style>   

<div id="big">
    <div class="little"></div>
</div>​

Staffer

… and after all that writing, lo and behold! A duplicate. That I had last edited only a month ago. https://mcmap.net/q/81290/-how-are-the-points-in-css-specificity-calculated – Busiek

Answer 1

Simply put: an ID will always beat any number of classes, pseudo-classes, attribute selectors or type selectors, but not necessarily another ID. That's all you need to remember.

Or to get into the technical nitty gritty: specificity isn't counted in some decimal numeric base that we all use. IDs are not worth "100 points", classes/attributes/pseudo-classes are not "10 points", types/pseudo-elements are not "1 point", etc. You don't add these numbers up and compare them, mathematically, based on their sum; that's not how it works. (You do add up the individual number of IDs, number of classes/attributes/pseudo-classes, etc, but you don't add all the individual numbers up to a single total.)

The specificity of these simple selectors is counted in a rather different way. The spec says it best:

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.

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 */

Notice that it says "concatenating" (as in joining strings together), not "adding" (as in the arithmetic sense of 2 + 2 = 4).

Notice also that it says "a number system with a large base"; this is just to illustrate that you don't take these specificity scores as decimal numbers, where 13 × 10 = 130 is greater than 1 × 100 = 100 in layman's terms.

This is how you would calculate the specificity of your selectors:

/* 1 ID, 1 class     -> specificity = 1-1-0 */
#big .little

/* 1 ID, 2 classes   -> specificity = 1-2-0 */
#big .little.little

/* 0 IDs, 13 classes -> specificity = 0-13-0 */
.little.little.little.little.little.little.little.little.little.little.little.little.little

Notice now how the specificity of the third selector is less than the first two, because there are no ID selectors in use?

When comparing the other two selectors, both of which have an ID selector each, you'll see that the second selector has one more class. In this case, the second selector wins due to the extra class selector, even though each has an ID selector, because the ID selectors by themselves share equal specificity.

Busiek