CSS Specificity Calculator

Description & Example

CSS specificity determines which style rules apply to an element when multiple rules could match. Specificity is expressed as a three-part value: the number of ID selectors, the number of class selectors (including classes, attributes, and pseudo-classes), and the number of element selectors (including pseudo-elements). This calculator computes these values from any CSS selector.

For example, consider the selector: #header .nav li.active

It contains one ID selector (#header), two class selectors (.nav and .active), and one element selector (li). The resulting specificity is expressed as 1,2,1.

This tool is valuable when you need to diagnose CSS issues. By understanding the specificity of selectors, you can determine why certain styles are applied and others are not. The clear output helps you verify your CSS rules and resolve conflicts.