[Solved] Determining CSS Specificity Score [duplicate]

by


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.

solved Determining CSS Specificity Score [duplicate]