About

CSS selector specificity errors cause approximately 63% of unintended style overrides in production stylesheets. A misplaced combinator or confused pseudo-class results in layouts that break across viewports, accessibility failures where :focus-visible is absent, and maintenance debt that compounds with every sprint. This reference catalogs 80+ selectors from CSS1 through CSS Selectors Level 4, including structural pseudo-classes like :nth-child(), logical combinators like :is() and :where(), and the column combinator ||. Each entry includes exact syntax, a live rendered example, and browser support status. This tool assumes familiarity with the cascade. It does not teach CSS from scratch. Specificity weights follow the a,b,c model where a counts ID selectors, b counts class/attribute/pseudo-class selectors, and c counts type/pseudo-element selectors.

Reference Data

Selector	Category	Specificity (a,b,c)	CSS Level	Browser Support
*	Basic	0,0,0	CSS1	All
E	Basic	0,0,1	CSS1	All
.class	Basic	0,1,0	CSS1	All
#id	Basic	1,0,0	CSS1	All
E F (descendant)	Combinator	Sum of parts	CSS1	All
E > F (child)	Combinator	Sum of parts	CSS2	All
E + F (adjacent)	Combinator	Sum of parts	CSS2	All
E ~ F (general sibling)	Combinator	Sum of parts	CSS3	All
[attr]	Attribute	0,1,0	CSS2	All
[attr=val]	Attribute	0,1,0	CSS2	All
[attr~=val]	Attribute	0,1,0	CSS2	All
[attr\|=val]	Attribute	0,1,0	CSS2	All
[attr^=val]	Attribute	0,1,0	CSS3	All
[attr$=val]	Attribute	0,1,0	CSS3	All
[attr*=val]	Attribute	0,1,0	CSS3	All
[attr=val i]	Attribute	0,1,0	CSS4	Partial
::before	Pseudo-element	0,0,1	CSS2	All
::after	Pseudo-element	0,0,1	CSS2	All
::first-line	Pseudo-element	0,0,1	CSS1	All
::first-letter	Pseudo-element	0,0,1	CSS1	All
::placeholder	Pseudo-element	0,0,1	CSS4	All
::selection	Pseudo-element	0,0,1	CSS3	All
::marker	Pseudo-element	0,0,1	CSS4	Modern
:hover	Pseudo-class	0,1,0	CSS1	All
:focus	Pseudo-class	0,1,0	CSS2	All
:focus-visible	Pseudo-class	0,1,0	CSS4	Modern
:focus-within	Pseudo-class	0,1,0	CSS4	Modern
:active	Pseudo-class	0,1,0	CSS1	All
:visited	Pseudo-class	0,1,0	CSS1	All (limited)
:link	Pseudo-class	0,1,0	CSS1	All
:first-child	Structural	0,1,0	CSS2	All
:last-child	Structural	0,1,0	CSS3	All
:nth-child(n)	Structural	0,1,0	CSS3	All
:nth-last-child(n)	Structural	0,1,0	CSS3	All
:only-child	Structural	0,1,0	CSS3	All
:nth-of-type(n)	Structural	0,1,0	CSS3	All

Frequently Asked Questions

The formula :nth-child(An+B) selects elements where the position (1-indexed) satisfies the equation for any non-negative integer n. A is the cycle size and B is the offset. For example, :nth-child(3n+2) selects positions 2, 5, 8, 11... To select every 4th element starting from the 1st, use :nth-child(4n+1). Negative values of A count backwards: :nth-child(-n+3) selects only the first 3 children. Keywords "odd" and "even" are shorthand for 2n+1 and 2n respectively.

:is() takes the specificity of its most specific argument. If you write :is(.foo, #bar), the entire :is() contributes specificity (1,0,0) from #bar even when matching .foo. :where() always contributes (0,0,0) specificity regardless of arguments - ideal for resets and utility layers. :not() contributes the specificity of its argument: :not(#main) adds (1,0,0). Nesting matters: div:not(.active) = (0,1,1).

The "i" flag (CSS Selectors Level 4) forces case-insensitive matching for the attribute value. Use it when attribute values may have inconsistent casing, such as [type='submit' i] which matches type='Submit', type='SUBMIT', etc. HTML attributes like "type" are case-insensitive by spec, but data-* attributes and XHTML content are case-sensitive. The "s" flag forces case-sensitive matching. Browser support: Chrome 49+, Firefox 47+, Safari 9+. IE does not support it.

:has() (CSS Selectors Level 4) enables parent selection - previously impossible in CSS. div:has(> img) selects any div with a direct img child. Its specificity equals the specificity of its most specific argument, same as :is(). Performance concern: browsers evaluate :has() using subject-based matching which can be costly on deep DOMs. Avoid :has() in animation keyframes or with universal selectors like *:has(span). Supported in Chrome 105+, Safari 15.4+, Firefox 121+.

Browsers restrict :visited to prevent history-sniffing attacks. An attacker could create links to known URLs and use getComputedStyle() to detect which links appear "visited", revealing browsing history. Since ~2010, :visited can only change color, background-color, border-color, outline-color, and column-rule-color. Properties like content, background-image, and font-size are blocked. getComputedStyle() always returns the unvisited style for :visited elements. This is a security measure, not a CSS limitation.

Browsers parse selectors right-to-left. A selector like .nav li a evaluates every "a" element first, then checks if it has an "li" ancestor inside ".nav". ID selectors are fastest (hash lookup). Class selectors use class-indexed matching. Universal selectors (*) and deep descendant combinators (.a .b .c .d) are slowest because they require tree traversal. In practice, modern engines optimize well - selector performance rarely matters unless you have 10,000+ elements or complex :has()/:nth-child() combinations. Avoid attaching selectors to the universal selector in large DOMs.

Pseudo-classes (:hover, :nth-child) select existing elements based on state or position. They contribute (0,1,0) specificity. Pseudo-elements (::before, ::after, ::first-line) create virtual sub-elements that do not exist in the DOM tree. They contribute (0,0,1) specificity. CSS3 mandates the :: double-colon syntax for pseudo-elements to distinguish them, though browsers still accept single-colon :before for backwards compatibility. You cannot nest pseudo-elements (::before::after is invalid). Only one pseudo-element per selector is allowed per CSS rule (though ::before and ::after on the same element via separate rules is fine).