Toolinix – simple online developer tools

CSS Specificity Calculator

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

CSS-селектори

Підсумок

Селектори
0
Найсильніший
0-0-0
Статус
Очікує
Specificity показано як A-B-C: ID, класи/атрибути/pseudo-classes та елементи/pseudo-elements.

Результати specificity

Проаналізуйте селектори, щоб побачити specificity scores.

Про CSS Specificity Calculator

CSS specificity визначає, який селектор перемагає, коли кілька правил застосовуються до одного елемента. Калькулятор показує A-B-C score для кожного селектора.

Інструмент рахує ID, класи, атрибути, pseudo-classes, елементи та pseudo-elements, включно з :is(), :not(), :has() і :where().

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

  1. Вставте один селектор на рядок, список через кому або повні CSS-правила.
  2. Натисніть Аналізувати, щоб розрахувати specificity для кожного селектора.
  3. Порівняйте A-B-C scores і перевірте, який селектор найсильніший.

Поради

  • Уникайте зайвих ID, якщо хочете CSS, який легко перевизначати.
  • :where() завжди має нульову specificity, що корисно для низькопріоритетних default styles.
  • Якщо specificity однакова, зазвичай перемагає правило, яке йде пізніше в CSS.

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

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

CSS Minifier / Beautifier
Мініфікуйте CSS для меншого розміру файлу або форматуйте стиснений CSS для зручного читання.
Інші інструменти
›
CSS Clamp Generator
Генеруйте адаптивні CSS clamp() значення для fluid typography, відступів, gap і розмірів layout.
Інші інструменти
›
CSS Grid Generator
Створюй CSS Grid layouts з колонками, рядками, відступами, вирівнюванням, live preview і готовим CSS.
Інші інструменти
›
CSS Flexbox Generator
Створюй CSS flexbox-розкладки з live preview, налаштуванням вирівнювання, напрямку, переносу, gap і готовим CSS для копіювання.
Інші інструменти
›
CSS Unit Converter
Конвертуйте CSS-одиниці px, rem, em, %, vw і vh з урахуванням базового шрифту, розміру батьківського елемента та viewport.
Інші інструменти
›

FAQ про CSS specificity

Що означає A-B-C?
A — ID selectors, B — класи, атрибути та pseudo-classes, C — element і pseudo-element selectors.
Чи враховуються inline styles?
Цей інструмент рахує specificity селекторів. Inline styles не є селекторами й зазвичай сильніші за правила stylesheet.
Як :where() впливає на specificity?
:where() додає нуль specificity, навіть якщо всередині є ID або класи.
Можна вставити повні CSS-правила?
Так. Інструмент витягує селектори перед відкривними фігурними дужками й аналізує їх.