🎨 CSS Selector Tester

Applies CSS selectors to HTML and highlights matching elements in real time. Specificity is also automatically calculated.

HTML input

CSS Selector

Preset: 1.

Matches: 0 element (e.g. in array, in programming, in programming)

Specificity:

0 inline

0 ID

0 class etc.

0 element (e.g. in array, in programming, in programming)

Preview (match element highlighting)

List of matched elements

CSS Selector Quick Reference

▼

Basic selectors

Syntax	Description
`element`	Element selector (e.g. p, div, span)
`.class`	Class selector
`#id`	ID selector
`*`	Universal selector (all elements)

Combinators

Syntax	Description
`A B`	Descendant selector (B inside A)
`A > B`	Child selector (B directly inside A)
`A + B`	Adjacent sibling (B right after A)
`A ~ B`	General sibling (B after A)

Attribute selectors

Syntax	Description
`[attr]`	Element with attribute
`[attr=val]`	Exact attribute match
`[attr^=val]`	Attribute starts with
`[attr$=val]`	Attribute ends with
`[attr*=val]`	Attribute contains

Pseudo-classes

Syntax	Description
`:first-child`	First child
`:last-child`	Last child
`:nth-child(n)`	nth child
`:hover`	Hover state
`:focus`	Focus state
`:not()`	Negation pseudo-class

Pseudo-elements

Syntax	Description
`::before`	Insert content before element
`::after`	Insert content after element
`::first-line`	First line

Usage and Application Examples

Paste the HTML and type in the CSS selector to highlight the matching element
The Specificity is automatically calculated, allowing you to see the selector's priority
Use the preset selector to quickly test frequently used patterns
Sample HTML button for easy loading of test HTML
In the list of matching elements, you can check the tag name, ID, and class and adjust the selector
Quick reference allows you to quickly see the selector syntax

What is CSS Selector Tester?

CSS Selector Tester is a debugging tool for validating CSS selectors in real time. Paste HTML and test selector patterns to instantly see which elements match, complete with visual highlighting. The tool automatically calculates selector specificity (a, b, c values), helping developers understand CSS cascade rules and debug styling conflicts. Essential for learning selector syntax and diagnosing why styles aren't applying to intended elements.

How to Use

Paste your HTML code into the editor. In the selector input field, type a CSS selector pattern—start simple with element names (div, p) or classes (.my-class). Press Enter or click test to see matched elements highlighted in the HTML preview. The specificity calculator displays the a, b, c values (ID selectors, class/attribute/pseudo-class selectors, element selectors). Test combinations like `div.container > p:first-child` to understand how descendant, child, and pseudo-class selectors work. Toggle multiple selectors to compare specificity and matching behavior. Experiment with attribute selectors like `[data-type="featured"]`.

Use Cases

Front-end developers debug CSS that isn't applying by testing selectors before updating stylesheets, saving trial-and-error time. Educators teach selector syntax by showing live matching results, making abstract concepts concrete. QA testers verify that CSS selectors in JavaScript (querySelector calls) correctly target intended elements before test automation. CSS preprocessor users (SCSS, Less) test the compiled selectors to ensure nesting produces expected results. Developers migrating between CSS frameworks test selectors in legacy HTML to identify what needs refactoring.

Tips & Insights

Specificity is calculated as (ID count, class/attribute/pseudo-class count, element count). Higher specificity wins CSS conflicts; inline styles (1000) beat any selector. Universal selector (*) has zero specificity. `:not()` doesn't add to specificity, but selectors inside it do. Pseudo-elements (::before, ::after) have element-level specificity. Learning selector syntax deeply reduces debugging time. Browser DevTools also show specificity, but this tool isolates selector testing from a full page environment. Practice attribute selectors like `[href^="https"]` for robust, maintainable CSS.

Frequently Asked Questions

What is a CSS selector?

A CSS selector is a pattern used to select specific elements in an HTML document. A combination of element name, class name, ID, attribute, and pseudo-class is used to specify the target to which the style is applied. For example, ".menu > li:first-child" selects the first li element directly below the menu class.

What is Specificity?

The detail level is a mechanism for determining the priority of CSS selectors. It is represented by four values (a, b, c, d), where a is the inline style, b is the number of ID selectors, c is the number of classes, attributes, and pseudo-classes, and d is the number of elements and pseudo-elements. The style of the selector with the highest level of detail takes precedence.

What types of selectors are supported?

All CSS supported by the browser, including element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes (:first-child, :nth-child, etc.), pseudo-elements (::before, ::after, etc.), and joiners (descendant, child, adjacent sibling, general sibling) selectors supported by the browser.

How does matching work?

The input HTML is parsed internally and querySelectorAll is used to find elements matching the CSS selector. Matched elements are highlighted with a yellow background and red border, and the element's tag name, ID, and class name are listed.

What is included in the reference panel?

Syntax and descriptions of basic selectors (element, class, ID, full name), bond children (descendant, child, adjacent sibling, general sibling), attribute selectors, pseudo-classes (:first-child, :nth-child, etc.), and pseudo-elements (::before, ::after, etc.) can be found at a glance.

Is the data entered secure?

Yes, all processing is completed within the browser, and no HTML or selectors are sent to the server. You can use this service with peace of mind.

What's the difference between #id and .class selectors?

ID selectors (#id) target unique elements with higher specificity (100 points), while class selectors (.class) target multiple elements with lower specificity (10 points). IDs should be unique per page.

How do I select elements that have multiple classes?

Chain class selectors together without spaces: .class1.class2 selects elements with both classes. A space creates a descendant selector instead, which targets different elements.

What are pseudo-classes and when should I use them?

Pseudo-classes like :hover, :focus, and :nth-child select elements based on state or position. They're essential for interactive styling, form validation, and selecting specific child elements.

How do I select first and last children effectively?

Use :first-child and :last-child to target specific positions. :nth-child(even) and :nth-child(odd) are useful for alternating row colors or creating striped patterns.

What does a space between selectors actually do?

A space creates a descendant combinator, selecting nested elements. For example, .parent .child selects all descendants; use > for direct children only.

Why isn't my selector matching even though the syntax looks correct?

Check for typos in class/ID names, verify correct combinator syntax, and confirm specificity isn't overridden by more specific rules. Browser DevTools help identify matching issues quickly.