Тестер селекторов CSS
Проверяет селекторы на HTML.
Об этом инструменте
Тестер применяет CSS-селектор к небольшому образцу HTML и перечисляет найденные совпадения. Разбор идёт локально через DOMParser, поэтому данные не покидают браузер.
Как пользоваться
Отредактируйте селектор и образец разметки, запустите проверку и посмотрите количество совпадений вместе с найденными фрагментами. Затем сравните результат с тем, что ожидает ваш код при вызове querySelector.
Пример
В образце есть карточка с дочерним заголовком и соседний блок без класса.
Ввод
div.card > h2Вывод
1 match(es): <h2>…</h2>Совет
Наглядный способ объяснить :nth-child и разницу между дочерним и потомковым комбинаторами.
Полезно знать
Отправляется ли мой HTML куда-либо?
Нет. Пример разбирается встроенным в браузер DOMParser на этой странице, а селектор выполняется через querySelectorAll.
Почему корректный селектор не находит совпадений?
Чаще всего комбинатор или имя класса смещены на один уровень. Проверьте «дочерний» (>) против «потомка» (пробел) и сверьте написание класса с примером разметки.