Toolinix – simple online developer tools

CSS Selector Tester

Усі інструменти

CSS-селектор

HTML

Підсумок

Збіги
0
Статус
Очікує
Preview працює у sandboxed frame. Знайдені елементи обведені й пронумеровані.

Preview збігів

Знайдені елементи

Перевірте селектор, щоб побачити знайдені елементи.

Про CSS Selector Tester

CSS Selector Tester перевіряє селектор на HTML-блоці через нативний selector engine браузера.

Це корисно для дебагу складних селекторів, перевірки attribute selectors, nested markup або того, що саме поверне querySelectorAll.

Як користуватися

  1. Вставте HTML у поле HTML.
  2. Введіть CSS-селектор, який хочете перевірити.
  3. Натисніть Перевірити селектор, щоб побачити знайдені елементи, paths і preview з підсвіткою.

Поради

  • Використовуйте specificity calculator, коли кілька matching selectors конкурують у cascade.
  • Некоректні селектори показує parser браузера.
  • Preview sandboxed, тому вставлена розмітка не запускає scripts.

Пов’язані інструменти

Можливо, тобі також стануть у пригоді ці інструменти.

CSS Specificity Calculator
Розраховуйте та порівнюйте specificity CSS-селекторів.
Інші інструменти
›
CSS Minifier / Beautifier
Мініфікуйте CSS для меншого розміру файлу або форматуйте стиснений CSS для зручного читання.
Інші інструменти
›
HTML Minifier / Beautifier
Мініфікуйте HTML для меншого розміру файлу або форматуйте стиснений HTML для зручного читання.
SEO та вебмайстер
›
Regex Tester
Перевіряй регулярні вирази на тексті й одразу бач збіги.
Текст та контент
›
CSS Grid Generator
Створюй CSS Grid layouts з колонками, рядками, відступами, вирівнюванням, live preview і готовим CSS.
Інші інструменти
›

FAQ про CSS selector tester

Чи підтримуються modern CSS selectors?
Підтримуються селектори, доступні в querySelectorAll вашого браузера.
Чи можна тестувати attribute selectors?
Так. Attribute selectors на кшталт [data-state='active'] підтримуються.
Чи виконує HTML scripts?
Ні. Preview рендериться у sandboxed frame, а script-like content видаляється перед preview.
Чому селектор не працює?
Селектор може бути некоректним, не підтримуватись поточним браузером або просто не збігатися з наданим HTML.