CSS Selector Reference
Browse, search, and test every CSS selector with live examples and specificity scores.
About This Tool
Ever stared at a CSS rule wondering why your styles aren't applying? Selectors are the gatekeepers of the cascade, and knowing exactly which one to reach for can save hours of debugging. This interactive reference covers every CSS selector available in modern browsers, giving you instant access to syntax, descriptions, specificity scores, example code, and browser support for each selector.
All processing happens entirely in your browser. No data is transmitted to any server, and the live preview runs in a sandboxed iframe so you can safely experiment with any HTML and CSS combination.
The reference covers seven categories: Basic selectors (type, class, ID, universal, grouping), Combinators (descendant, child, adjacent sibling, general sibling), Attribute selectors (presence, equals, starts-with, ends-with, contains, word match), Pseudo-classes (hover, focus, not, is, has, where, and more), Pseudo-elements (before, after, first-line, first-letter, placeholder, selection), Structural pseudo-classes (nth-child, first-child, last-of-type, empty, root), and UI State pseudo-classes (checked, disabled, valid, invalid, required, read-only).
The built-in specificity comparison tool lets you enter two selectors and instantly see which one wins in the cascade. This is invaluable when debugging CSS specificity conflicts. Every selector entry includes a "Try it live" button that loads the example HTML and CSS into the interactive preview area so you can modify and experiment immediately.
If you need to calculate specificity for complex selectors, pair this tool with the CSS Specificity Calculator. For visual CSS property experimentation, try the Flexbox Playground or the CSS Variable Generator.
How to Use
- Browse the selector list or use the search bar to find a specific selector by name, syntax, or description.
- Click a category filter button (Basic, Combinators, Attribute, etc.) to narrow the list.
- Click any selector row to expand its details: description, example HTML, example CSS, specificity, and browser support.
- Click the Copy button on any selector to copy its syntax to your clipboard.
- Click Try it live to load a selector's example into the interactive preview area at the bottom.
- Edit the HTML and CSS in the preview area to experiment with selectors in real time.
- Use the Specificity Comparison Tool to enter two selectors and see which one wins.
- Press Ctrl+Shift+C to quickly copy the first visible selector.
Popular CSS Selector Examples
FAQ
Is my data safe when using this tool?
Yes. Selector matching runs via the native DOMParser and querySelectorAll APIs in your browser, and the live preview uses a sandboxed iframe. No data is sent to any server, and no analytics are tracked on your input.
What is CSS specificity?
CSS specificity is a scoring system that determines which CSS rule applies when multiple rules target the same element. It is calculated as a tuple (ID, Class, Element): ID selectors have the highest weight, followed by class selectors, attribute selectors, and pseudo-classes, then element selectors and pseudo-elements. The universal selector (*) and :where() have zero specificity.
What does the specificity tuple (a, b, c) mean?
The three numbers represent: a = number of ID selectors, b = number of class selectors, attribute selectors, and pseudo-classes, c = number of type (element) selectors and pseudo-elements. A selector with (1, 0, 0) always beats (0, 10, 10) because IDs have higher precedence.
Which CSS selectors are supported in all browsers?
Basic selectors (type, class, ID), combinators (descendant, child, adjacent sibling), most attribute selectors, and common pseudo-classes like :hover, :focus, :first-child have universal browser support. Newer selectors like :has(), :is(), :where(), and :focus-visible require modern browsers (Chrome 88+, Firefox 78+, Safari 14+).
How does the :has() selector work?
The :has() pseudo-class selects elements that contain at least one descendant matching the argument. For example, div:has(img) selects any div that contains an img element. It is often called the 'parent selector' because it lets you style a parent based on its children. It is supported in Chrome 105+, Firefox 121+, and Safari 15.4+.
What is the difference between :is() and :where()?
Both :is() and :where() accept a selector list and match any element that matches one of the selectors. The key difference is specificity: :is() takes the specificity of its most specific argument, while :where() always has zero specificity. Use :where() when you want styles that are easy to override.
Can I use the specificity comparison tool for complex selectors?
Yes. The tool parses selectors and calculates specificity based on ID, class, attribute, pseudo-class, element, and pseudo-element components. It handles :not(), :is(), :has(), and :where() correctly. For very complex or edge-case selectors, the calculation may be approximate.
Related Tools
CSS Specificity Calculator
Calculate and compare CSS selector specificity scores. Visualize which selector wins in a cascade.
Flexbox Playground
Experiment with all CSS Flexbox properties visually. Configure container and item settings with live preview and generated CSS code.
CSS Variable Generator
Design color theme systems with CSS custom properties. Auto-generate shade scales, semantic tokens, and dark mode variants.
CSS Easing Function Editor
Visually edit cubic-bezier() easing functions with draggable control points, animation preview, and comparison mode.
CSS Selector Tester
Test CSS selectors against HTML markup and see matching elements highlighted.
ANSI Color Code Reference
Complete ANSI escape code reference with 256-color palette, true color, text formatting, and copy-ready sequences for Bash, Python, Node.js, Go, and C.
htmx Cheat Sheet
Searchable htmx 2.0 reference: every hx-* attribute, htmx:* event, and HX-* request/response header with copy-ready HTML examples.
CSS text-wrap Playground
Compare text-wrap: balance, pretty, wrap, and nowrap side-by-side with live font-size and container-width controls.
View Transitions API Generator
Generate CSS for the View Transitions API: cross-fade, slide, scale, or custom keyframes with a real document.startViewTransition() preview.
CSS Anchor Positioning Generator
Visually generate CSS anchor positioning: anchor-name, position-anchor, anchor(), position-area, and position-try-fallbacks. Live preview, copy-paste ready.