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 четци, парсери за имейли или скриптове за автоматизация с 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, може да се счупят в продукционни страници с леко различен markup.

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

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