How can I calculate specificity?

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

2 Likes

Can you give an example of a time when I would need to calculate my specificity?

2 Likes

If a style isn’t applying to an element you selected, you could check other rule sets to see if they override your rule set. To check if it’s overriding your rule set, you would need to calculate each rule set’s specificity