CSS Selector Reference
Browse, search, and test every CSS selector with live examples and specificity scores.
About This Tool
The CSS Selector Reference is a comprehensive, interactive guide to every CSS selector available in modern browsers. Whether you are a beginner learning how selectors work or an experienced developer looking up a rarely-used pseudo-class, this tool gives 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. All processing happens entirely in your browser. The live preview runs in 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.
Accessibility Audit Checklist
Interactive WCAG 2.1 compliance checklist organized by level (A, AA, AAA) and category with progress tracking and exportable audit reports.
CSS Selector Tester
Test CSS selectors against HTML markup and see matching elements highlighted.