CSS Specificity Calculator

Input

CSS Selectors (see notes)

CSS Specificity Rules

Rules from: http://reference.sitepoint.com/css/specificity

  1. If one declaration is from a style attribute, rather than a rule with a selector (an inline style), it has the highest specificity. If none of the declarations are inline, proceed to step two. (ignored here)
  2. Count the ID selectors. The declaration with the highest count has the highest specificity. If two or more have the same number of ID selectors, or they all have zero ID selectors, proceed to step three.
  3. Count the class selectors (for example, .test), attribute selectors (for example, [type="submit"]), and pseudo-classes (for example, :hover). The declaration with the highest total has the highest specificity. If two or more have the same total, or they all have totals of zero, proceed to step four.
  4. Count the element type selectors (for example div) and pseudo-elements (for example, :first-letter). The declaration with the highest total has the highest specificity.

See also "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification - 6.4.3 Calculating a selector's specificity" (www.w3.org/TR/CSS2/cascade.html#specificity)

Notes

This app doesn't process all rule types possible in a stylesheet. It has limitations, which I hope to fix in future versions. Example: this application will break if your stylesheet includes @rules. I wanted to keep it simple for now, but hopefully soon, I'll use a real css parser and include more details in the output.

Version Info

This site is running version 1.0.1.

  • (2011.12.04) Version 1.0

    Initial release.

  • (2011.12.24) Version 1.0.1

    Fixed: Bug where the instructions were repeated upon clicking the "calculate" button more than once.

    Fixed: IE9 bug (or at least an inconsistency from other browsers) where the box-shadow on the footer didn't render properly.

  • (2012.03.22) Version 1.1.0

    Added: Twitter's Bootstrap w/LESS CSS.

Output