We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
Was this tool helpful to use?
Your feedback helps us make it better
Verify CSS selector matches in HTML and quickly locate elements.
*Universal selector, matches all elements.
* { margin: 0; }#idID selector, matches the unique element with a given id.
#header { color: #111; }.classClass selector, matches elements with the given class.
.btn { border-radius: 8px; }A BDescendant selector, matches any B inside A.
nav a { text-decoration: none; }A > BChild selector, matches direct child B of A only.
ul > li { list-style: none; }A + BAdjacent sibling selector, matches first B immediately after A.
h2 + p { margin-top: 0; }A ~ BGeneral sibling selector, matches all sibling B after A.
h2 ~ p { color: #666; }[attr]Attribute presence selector, matches elements with an attribute.
input[required] { border-color: red; }[attr=value]Attribute value selector, matches exact attribute value.
a[target='_blank'] { color: #2563eb; }:hoverHover pseudo-class, matches elements on mouse hover.
button:hover { opacity: .9; }:focusFocus pseudo-class, matches currently focused elements.
input:focus { outline: 2px solid #3b82f6; }:nth-child(n)Structural pseudo-class, matches children by index pattern.
li:nth-child(2n) { background: #f8fafc; }::beforePseudo-element that inserts stylable content before element content.
.tag::before { content: '#'; }::afterPseudo-element that inserts stylable content after element content.
.tag::after { content: '✓'; }Overview
Understand what the tool solves, how it works, and the boundaries of its data.
A CSS selector is a pattern used in a style rule to target elements in a document. This page is a compact reference: it lists common selector forms with a short explanation and a sample CSS rule. Search the list by a selector, part of an example, or a term from its description, then copy the selector text for your stylesheet or editor.
Examples include .card for a class, #header for an ID, and [required] for an attribute. A combinator describes a relationship: nav a matches links nested anywhere inside a navigation element, while ul > li expresses a direct-child relationship. The reference also includes state and structure forms such as :hover and :nth-child(n), plus pseudo-elements such as ::before.
Guide
Follow the workflow and verify inputs and outputs with practical examples.
Enter a word or fragment such as class, hover, [attr], or A > B in the search field.
Compare the matching selector entry with its description and example rule. The sample shows how that selector can appear in CSS.
Copy the selector beside the entry and paste it into your own stylesheet or editor.
Test the copied rule in the document and browser where you intend to use it. Confirm that its match and visual effect are what you expect.
For instance, search for nth-child to find a row-selection example, or search nav a to review a descendant relationship. If no entry appears, clear or simplify the search phrase; the page filters its built-in list and does not parse new CSS.
Use cases
See how the tool fits into real work and everyday tasks.
Look up basic forms, then compare how a class, attribute, or pseudo-class changes the target described by a rule.
Use the descriptions to interpret punctuation and relationships in a selector before checking the rule in its actual page context.
Find a sample such as ul > li, copy the selector, and adapt it in your own project after testing.
Q&A
Find concise answers to common questions and confusing cases.
No. This page filters a preset list of selector explanations and examples. It does not accept an HTML document or run a selector against a live page.
The search checks the listed selector text, description, and example. Try a shorter fragment or clear the field to restore the full list.
The reference describes syntax, but browser support can vary with the selector and browser version. Check the browsers you target and test in the actual project.
Notes
Review scope, result limitations, and important precautions before use.
A selector reference does not verify syntax in your stylesheet, inspect a page’s DOM, report matched nodes, or calculate rule priority. Some selectors depend on the document structure or an element state. For newer selector features, confirm support for your target browsers before relying on them.
Related
Discover related tools, collections, and available API capabilities.