About

CSS (Cascading Style Sheets) relies heavily on the concept of Specificity to determine which styles apply to an element when multiple rules conflict. Understanding the mechanics of selector matching is not just academic; it is critical for preventing !important wars and maintaining scalable, clean codebases. This tool provides a deterministic environment to test selector logic against live DOM structures, helping developers eliminate guesswork.

Common pitfalls include over-qualifying selectors (e.g., div.nav instead of .nav), which artificially inflates specificity, making future overrides difficult. By visualizing the A-B-C specificity weight and translating cryptic selector strings into natural language, this utility bridges the gap between intended design and browser implementation.

Formulas

Specificity is calculated as a tuple ABC, where higher values in a column outweigh any number of values in columns to the right. The calculation algorithm is defined as:

{

A = Count of ID Selectors (#id)B = Count of Classes, Attributes, and Pseudo-classes (.class, [attr], :hover)C = Count of Elements and Pseudo-elements (div, ::before)

Example: The selector #nav .item > a:hover breaks down into:

1 (ID),2 (Class+Pseudo)

−1 (Element) → 1-2-1

Reference Data

Selector Pattern	Description	Specificity (A-B-C)	Example
*	Universal Selector	0-0-0	*
element	Type Selector	0-0-1	div, span
.class	Class Selector	0-1-0	.container
#id	ID Selector	1-0-0	#header
[attr]	Attribute Selector	0-1-0	[type="text"]
:pseudo-class	State/Structural	0-1-0	:hover, :nth-child()
::pseudo-element	Virtual Elements	0-0-1	::before, ::placeholder
+, >, ~	Combinators	0-0-0	div > p

Frequently Asked Questions

Common reasons include typo errors in class names, incorrect combinator usage (e.g., using ">" for nested grandchildren instead of space), or browser-specific shadow DOM boundaries. Ensure your HTML structure exactly matches the hierarchy implied by your combinators.

!important is not part of the specificity score (A-B-C). It is a separate override layer that trumps all normal specificity rules. It should be used sparingly as it breaks the natural cascading logic of CSS.

A pseudo-class (single colon, e.g., :hover, :first-child) selects an element based on its state or position. It adds 0-1-0 to specificity. A pseudo-element (double colon, e.g., ::before, ::first-line) creates a virtual element or selects a specific part of an element. It adds 0-0-1 to specificity.

No. The universal selector has a specificity of 0-0-0. However, it can still override inherited styles because explicit rules (even with 0 specificity) generally beat inherited properties.