CSS specificity calculator

Paste your CSS into the field below, the specificity of your selectors will be calculated for you.

If you don't know what CSS specificity is, you probably don't need this tool, but for an explanation see:

Current limitations

Your CSS must be valid in order for the calculator to work
Currently only HTML elements are counted in the score, custom tags such as XML are not
XML elements are now counted too BUT if they have periods '.' in the element name the calculator will not give a reliable count for the class component (c) part of the score.

Changes/Updates:

Update: disabled count of :not() while counting the arguments instead.
Ref: CSS3 Selector Specificity Calculation

Selectors inside the negation pseudo-class are counted like any other,
but the negation itself does not count as a pseudo-class
Update: amended to allow for CSS3 selector arguments.
Update: now includes XML element count (unlesss there are full stops in the element name)
Amended to reflect that specificity calculations should not be in base10.

6.4.3 Calculating a selector's specificity

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a <style> attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples:
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */