How can I calculate specificity?


#1

Question

How can I calculate specificity?

Answer

Think of the specificity for a selector in terms of a 3 digit number (starting out as 000), then using the following table we can calculate the selectors specificity (ignore the universal, *, selector):

How to calculate specificity:
number of id selectors in selector number of class, attribute, and pseudo-class (e.g. :hover) selectors in selector number of type/element selectors in selector

For example, given the following selector:
div.my-class #my-id #another-id

The specificity would be:
211
In the selector we have 2 id selectors - #my-id and #another-id, 1 class selector - .my-class, and 1 type selector - div