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 у браузері або змінювати живу сторінку.

Поширені сценарії використання для розробників

Frontend-розробники використовують цей інструмент, щоб створювати точні селектори для стилізації, тестувати селектори для скрейпінгу на зразках 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's page.locator, Puppeteer's page.$), яке працює з фактично відрендереним DOM із виконанням JavaScript, динамічним контентом, обходом shadow DOM та обробкою iframe — того, що статичне зіставлення HTML не може відтворити.