What is a CSS selector?

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.

What selector syntax does this tester support?

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).

How do I select elements by class or ID?

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'.

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

: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.

Тестер CSS-селекторов

Ошибка

CSS-селектор

DOMParser is not defined

Ввод HTML

Совпадения

DOMParser is not defined

Технические детали

Как работает тестер CSS-селекторов

Что делает инструмент

Тестер CSS-селекторов проверяет CSS-селекторы на HTML-вводе и визуально подсвечивает все совпавшие элементы. Вы вставляете или набираете HTML в одной панели, вводите CSS-селектор и мгновенно видите, какие элементы совпали, с подсчётом общего числа совпадений. Это даёт мгновенную обратную связь по специфичности и области действия селектора без необходимости открывать DevTools в браузере или изменять живую страницу.

Распространенные сценарии использования для разработчиков

Фронтенд-разработчики используют этот инструмент, чтобы создавать точные селекторы для стилизации, тестировать селекторы для скрейпинга на примерах HTML перед написанием кода извлечения и отлаживать, почему CSS-правило не применяется к нужным элементам. QA-инженеры проверяют селекторы Cypress или Playwright на снимках страниц. Также это полезно для написания правил извлечения контента для RSS-ридеров, парсеров email или скриптов автоматизации в headless-браузере.

Форматы данных, типы или варианты

Инструмент поддерживает полную спецификацию CSS Selectors Level 3, включая селекторы по типу, селекторы классов и ID, селекторы атрибутов с операторами ([attr^=value], [attr$=value]), псевдоклассы (:nth-child, :not, :first-of-type), комбинаторы (потомок, дочерний >, соседний +, общий соседний ~) и псевдоэлементы (::before, ::after). Сложные составные селекторы и списки селекторов (разделённые запятыми) полностью поддерживаются.

Распространенные ошибки и крайние случаи

Сопоставление CSS-селекторов зависит от разобранной структуры DOM, а не от исходного текста HTML — незакрытые теги, неявные элементы (tbody) и исправление ошибок браузером могут привести к тому, что фактический DOM будет отличаться от того, что вы видите в исходнике. Псевдоэлементы (::before, ::after) не являются реальными узлами DOM и не могут быть выбраны через querySelector. Префиксы пространств имён в XML/SVG-контенте требуют особой обработки. Слишком специфичные селекторы, которые работают на примере HTML, могут сломаться на продакшн-страницах с немного другой разметкой.

Когда использовать этот инструмент, а когда — код

Используйте этот браузерный инструмент для интерактивной разработки селекторов и быстрой проверки на HTML-фрагментах. Для продакшн-скрейпинга или автоматизации тестов используйте встроенную проверку селекторов вашего фреймворка (Playwright page.locator, Puppeteer page.$), которая работает по фактически отрендеренному DOM с выполнением JavaScript, динамическим контентом, обходом shadow DOM и обработкой iframe — того, что статическое сопоставление по HTML воспроизвести не может.