Тестер CSS-селекторів
CSS-селектор
HTML
Підсумок
Preview збігів
Знайдені елементи
Про CSS Selector Tester
CSS Selector Tester перевіряє селектор на HTML-блоці через нативний selector engine браузера.
Це корисно для дебагу складних селекторів, перевірки attribute selectors, nested markup або того, що саме поверне querySelectorAll.
Як користуватися
- Вставте HTML у поле HTML.
- Введіть CSS-селектор, який хочете перевірити.
- Натисніть Перевірити селектор, щоб побачити знайдені елементи, paths і preview з підсвіткою.
Поради
- Використовуйте specificity calculator, коли кілька matching selectors конкурують у cascade.
- Некоректні селектори показує parser браузера.
- Preview sandboxed, тому вставлена розмітка не запускає scripts.
Перевірки CSS selector перед використанням query у production
Тестуйте selectors на репрезентативному markup, щоб вони знаходили потрібні elements без залежності від крихкої структури.
Позитивні й негативні збіги
Додайте elements, що мають збігатися, схожі винятки, повторювані components і порожні або optional containers.
Динамічні стани документа
Перевірте markup до і після client rendering, lazy loading, validation, navigation та зміни state classes.
Сумісність selector
Уточніть підтримку :has(), namespace syntax, escaping і nonstandard extensions у конкретному browser або library.
Стабільні hooks
Використовуйте спеціальні classes або data attributes для scripts і tests замість visual nesting чи generated class names.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.