When two CSS selectors target the same element, one of them has to win, right? Deciding which one is the winner is a matter of detecting which is the most specific. You can read the full technical details of this in the CSS Spec, but basically it works like this:
A specificity score is 3 values. We’ll refer to these values as “a,b,c”.
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
At the end, whichever has the highest score wins, reading left to right,
a > b > c. Note that any number of lower-valued selectors never outvalues a higher valued selector. So, even a selector which had 1000 classes in it would be less specific than one which had a single id.
(0, 1000, 0) < (1, 0, 0)
So the plugin, when activated, reads all the CSS selectors from your file (even in HTML files), and collates them in a display panel alongside their score. For simplicity the score is presented as a single number:
a * 100 + b * 10 + c, which means that if you DO have a selector with 1000 classes, this plugin will tell you that it has a higher score, but you know what? If you have a selector with more than 10 classes or elements, you got bigger problems, pal.
1 2 3 4 5 6