Specificity Calculator

Many of you know that CSS selectors have a quality called specificity. Specificity is calculated mathematically. A more specific CSS selector rules over selectors of lesser specificity. If you’re interested in learning the math yourself, it is explained in my book, Mastering Integrated HTML and CSS. Actually learning how it works mathematically can help you create highly specific selectors when you need them. If doing the math isn’t high on your list of things to do, there’s now an online specificity calculator. You paste in a style sheet and it spits out a nice list of your selectors and their specifity. The image shows a screen shot of the results for a style sheet I grabbed to test the calculator. A sweet tool.

specificity calculator results

You don’t read that number like a normal three-digit numeral. Reading left to right, the first number represents the number of ID selectors. The middle number represents the number of class, pseudo-class and attribute selectors. The third number represents the number of element and pseudo-element selectors. The larger the number, the more specific the rule.

1 thought on “Specificity Calculator

Leave a Reply