CSS selectors are declarative matching patterns defined by the W3C that enable browser rendering engines to bind styles and JavaScript to DOM elements.
CSS Selectors are declarative pattern-matching expressions defined by the World Wide Web Consortium (W3C) in the Selectors Level 4 specification. They empower web browsers to query the Document Object Model (DOM) and bind visual style declarations from CSS stylesheets, or query elements programmatically in JavaScript via document.querySelector() and document.querySelectorAll().
Test and validate selectors against HTML markup in real time or calculate specificity scores using our browser-based CSS Selector Tester, format your stylesheets with our CSS Formatter, or verify multi-device rendering with the Responsive Design Tester.
| Specification | Details |
|---|---|
| Standard Body | W3C CSS Working Group |
| Living Standard | W3C Selectors Level 4 |
| DOM Query APIs | Element.querySelector(), Element.querySelectorAll(), Element.matches(), Element.closest() |
| Specificity Vector | (a, b, c) representing (IDs, Classes/Attributes/Pseudo-classes, Types/Pseudo-elements) |
| Zero-Specificity Wrapper | :where(<selector-list>) |
| Relational Pseudo-Class | :has(<relative-selector-list>) |
| Forgiving Pseudo-Classes | :is(), :where(), :not() |
(a, b, c)When multiple CSS rules target the same DOM element and declare conflicting properties, the browser engine resolves conflicts using Specificity. Specificity is evaluated as a three-column vector (a, b, c) compared lexicographically from left to right:
┌────────────────────────────────────────────────────────────────────────┐
│ Specificity Columns │
├──────────────┬──────────────────────────────────────────┬──────────────┤
│ Column A │ Column B │ Column C │
├──────────────┼──────────────────────────────────────────┼──────────────┤
│ ID Selectors │ Classes, Attributes, Pseudo-Classes │ Type/Tags, │
│ (`#header`) │ (`.btn`, `[type="text"]`, `:first-child`)│ Pseudo-Elems │
│ │ │ (`div`, `::after`)
└──────────────┴──────────────────────────────────────────┴──────────────┘
| Selector Example | A (IDs) | B (Classes) | C (Elements) | Total Vector | Numeric Score |
|---|---|---|---|---|---|
* (Universal) |
0 | 0 | 0 | (0, 0, 0) |
0 |
div |
0 | 0 | 1 | (0, 0, 1) |
1 |
ul > li.item |
0 | 1 | 2 | (0, 1, 2) |
12 |
input[type="text"]:focus |
0 | 2 | 1 | (0, 2, 1) |
21 |
#main-nav ul li a |
1 | 0 | 3 | (1, 0, 3) |
103 |
#sidebar .widget:first-child a[href^="https"] |
1 | 3 | 1 | (1, 3, 1) |
131 |
:where(#sidebar, .widget) |
0 | 0 | 0 | (0, 0, 0) |
0 |
:is(#sidebar, .widget) |
1 | 0 | 0 | (1, 0, 0) |
100 |
Evaluation Rule: Column A completely outweighs Column B regardless of value magnitude. A single ID
(1, 0, 0)overrides a rule with twenty chained classes(0, 20, 0).
*): Matches any element in the document tree. Contributes (0, 0, 0).tagname): Matches nodes with the specified HTML tag name (e.g., article, span). Contributes (0, 0, 1)..classname): Matches nodes containing the class token in their class attribute. Contributes (0, 1, 0).#idname): Matches the unique element whose id attribute equals the identifier. Contributes (1, 0, 0).A B): Matches element B nested anywhere within the subtree of element A.A > B): Matches element B that is an immediate direct child of element A.A + B): Matches element B that immediately follows sibling element A under the same parent.A ~ B): Matches element B that follows sibling element A anywhere under the same parent.[attr]: Element has the specified attribute present.[attr="value"]: Attribute value exactly matches "value".[attr^="prefix"]: Attribute value begins with "prefix".[attr$="suffix"]: Attribute value ends with "suffix".[attr*="substring"]: Attribute value contains "substring" anywhere.[attr~="word"]: Attribute value contains "word" in a space-delimited list.[attr|="lang"]: Attribute value is "lang" or starts with "lang-".[attr="value" i]: Case-insensitive attribute matching.:has(<selector>) (Relational / Parent Selector): Matches an element if any relative selector matches descendants or following siblings (e.g., card:has(> img)).:is(<selector-list>): Matches any element matching one of the arguments; takes the specificity of its highest argument.:where(<selector-list>): Identical matching logic to :is(), but always contributes (0, 0, 0) specificity.:not(<selector-list>): Matches elements that do not match the argument list.:nth-child(An+B of <selector-list>): Matches the nth element among siblings that match the filtered selector list.(1, 0, 0) that requires aggressive overrides or !important. Prefer class-based components.:where() for Base Resets: Wrap utility or framework default styles in :where() to allow consumers to override them effortlessly with single-class selectors (0, 1, 0)..nav *); specify concrete element or class targets (.nav .nav-link).:has() Over JavaScript Hooks: Use CSS :has() for conditional styling based on form validity or component state rather than toggling modifier classes via JavaScript.Free, browser-based utilities to test, generate, and inspect CSS Selectors (Syntax, Combinators, Specificity & Pseudo-Classes) payloads directly.
Test CSS selectors against HTML with real-time matching and specificity analysis.
Format, minify, and validate CSS with property sorting and SCSS conversion.
Preview web pages across multiple device viewports instantly.
Scan HTML for WCAG accessibility issues with AI-powered fix suggestions.