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

Тестирование CSS-селекторов на HTML-фрагментах

Вставь HTML, введи CSS-селектор и сразу увидишь совпадения. Браузерная консоль не нужна — только разметка, с которой ты работаешь. Полезно при написании парсера: убедись, что '.product-title > a' захватывает то, что нужно, прежде чем запускать его на тысячах страниц.

HTML / XML

CSS Selector

Output

No input provided

Как использовать

1Вставь HTML — Скопируй HTML-фрагмент страницы — можно из DevTools (Inspect → Copy outerHTML) или из исходника.
2Напиши селектор — Введи CSS-селектор в поле Selector. Например: .product-card h2 a или div[data-id].
3Получи результат — В авторежиме совпадения подсвечиваются сразу при вводе селектора. Если авторежим отключён — нажми Запустить.
4Уточни селектор — Если совпадений слишком много или мало — скорректируй селектор. Изменения применяются мгновенно.

Примеры

Заголовки товаров на странице листинга

.product-card .title a

Выбери заголовки товаров — получишь текст и href за один запрос без дополнительных шагов.

Ссылки пагинации

nav.pagination a[href]

Исключи задизейбленные элементы — выбери только якоря с атрибутом href внутри навигации.

N-й элемент списка

ul.results li:nth-child(3)

Если третий элемент — «рекомендованный» — извлеки его отдельно для специальной обработки.

Атрибут data-product-id на всех элементах

div[data-product-id]

Найди все div с нужным атрибутом независимо от значения — работает на SPA-сайтах без стабильных классов.

Элемент, не содержащий определённый класс

.item:not(.disabled)

Отфильтруй неактивные элементы — получи только рабочие позиции из списка.

Когда использовать

CSS-селекторы — основа большинства Python и Node.js-скраперов: BeautifulSoup, Cheerio, Scrapy и Playwright принимают их нативно. Проблема в том, что селекторы, которые выглядят правильно в DevTools, часто ломаются на реальном HTML — потому что DevTools показывает живой DOM после выполнения JavaScript, а не исходник. Этот инструмент работает напрямую с HTML-строкой — точно так же, как будет работать твой парсер. Проверь селектор против сырого HTML до того, как запускать краулер на тысячах страниц и обнаруживать, что имя класса отличалось на один символ. Особенно полезно: вставить HTML из Request Tester (получить сырой ответ страницы), написать и проверить селектор здесь, затем перенести в код.

Частые вопросы

В чём разница между CSS-селекторами и XPath?›

CSS-селекторы короче и читабельнее для большинства задач. XPath мощнее для обхода дерева вверх (выбрать родителя по тексту потомка) — CSS это не умеет. Для парсинга CSS обычно достаточно и проще в отладке.

Почему селектор работает в DevTools, но не в скрапере?›

DevTools показывает DOM после выполнения JavaScript. Скрапер получает исходный HTML до JS. Элементы, добавленные через JavaScript, в исходнике отсутствуют. Тестируй против того HTML, который реально приходит в ответе — используй Request Tester чтобы получить его.

Поддерживаются ли псевдоклассы :hover и :focus?›

Динамические псевдоклассы (:hover, :focus, :checked) неприменимы к статическому HTML — они работают только в живом браузере. Структурные псевдоклассы (:nth-child, :first-of-type, :not()) работают полностью.

Как выбрать элемент с несколькими классами?›

Объедини классы без пробела: .class-one.class-two — элемент должен иметь оба. Пробел (.class-one .class-two) означает «потомок» — .class-two внутри .class-one.

Работают ли эти селекторы в Scrapy и BeautifulSoup?›

Да. Scrapy response.css() и BeautifulSoup select() используют спецификацию CSS Selectors Level 4. Селекторы, работающие здесь, работают в обеих библиотеках — с незначительными исключениями для самых новых псевдоклассов.

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

Как использовать

Примеры

Когда использовать

Частые вопросы

Похожие инструменты