CSS Specificity Calculator

Specificity is how the browser decides which CSS rule wins when several rules target the same element. It is expressed as a tuple of three numbers, often written (a,b,c). Column a counts ID selectors, column b counts classes, attributes, and pseudo-classes, and column c counts type (element) selectors and pseudo-elements. The browser compares the columns left to right, so any selector with a higher a beats one with a lower a no matter how large b or c are.

Count each part of the selector and put it in the right column. Add 1 to a for every ID (like #main), add 1 to b for every class (.card), attribute ([type=text]), or pseudo-class (:hover), and add 1 to c for every element name (div) or pseudo-element (::before). The universal selector (*) and combinators (>, +, ~, and the descendant space) add nothing. For example, #nav .item a:hover is (1,2,1).

Compare the tuples column by column, starting with a. The selector with the larger a wins outright. If a ties, the larger b wins, and if b also ties, the larger c wins. If all three columns are equal, neither selector is more specific, and the one written later in the stylesheet wins by source order. This tool ranks both selectors for you and tells you which column decided it.

The :is(), :not(), and :has() pseudo-classes do not add anything for the function itself, but they take on the specificity of the most specific selector inside their parentheses. So :is(#id, .class) counts as a single ID. The :where() pseudo-class is special: it always contributes zero specificity, no matter what is inside it, which makes it useful for low-priority defaults.

Pseudo-classes like :hover or :focus describe a state and count in column b, the same as classes. Pseudo-elements like ::before, ::after, or ::first-line target a sub-part of an element and count in column c, the same as type selectors. Legacy single-colon syntax (:before, :after, :first-line, :first-letter) still counts as a pseudo-element, so this tool treats div:before and div::before identically.

They sit outside the (a,b,c) tuple. An inline style attribute beats any selector in a stylesheet, and a declaration marked !important beats normal declarations regardless of specificity. This calculator scores selectors only, so use it to compare stylesheet rules, then remember that inline styles and !important override the result on top of that.