Question 1

What is a CSS selector?

Accepted Answer

A CSS selector is a pattern used to select and style HTML elements. Selectors can target elements by tag name (div), class (.my-class), ID (#my-id), attribute ([href]), pseudo-class (:hover), or combinations thereof. CSS selectors are also used in JavaScript via querySelectorAll() to find elements in the DOM.

Question 2

What selector syntax does this tester support?

Accepted Answer

This tester uses the browser's native querySelectorAll() engine, so it supports the full CSS Selectors Level 4 specification — including descendant (A B), child (A > B), adjacent sibling (A + B), general sibling (A ~ B), attribute selectors ([attr=value]), pseudo-classes (:nth-child, :not, :is, :where, :has), and pseudo-elements (::before, ::after).

Question 3

How do I select elements by class or ID?

Accepted Answer

Use a dot prefix for classes (.my-class) and a hash prefix for IDs (#my-id). You can combine selectors to narrow results: div.card selects

elements with class 'card', and #header .nav-link selects elements with class 'nav-link' that are descendants of the element with ID 'header'.

Question 4

What is the difference between :nth-child and :nth-of-type?

Accepted Answer

:nth-child(n) counts all sibling elements regardless of tag, then applies the style if the element matches the selector. :nth-of-type(n) counts only siblings of the same tag type. For example, li:nth-child(2) selects the second child if it is a

, while li:nth-of-type(2) selects the second

among its siblings.

無料のWeb開発者向けツール

CSS Selector Tester

HTML Input

Matches