Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як розраховується специфічність? Як виглядає формула специфічності?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Специфічність селектора** розраховується як числова «вага» у форматі `[a, b, c, d]`, де `a`, inline-стилі, `b`, ID-селектори, `c`, класи й псевдокласи, `d`, теги й псевдоелементи. **Ключове:** розряди порівнюються зліва направо, а `!important` та універсальний селектор `*` у цю формулу не входять.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСпецифічність обчислюється як **числова «вага» селектора**, що складається з чотирьох розрядів. Браузер формує число за формулою: ```javascript [a, b, c, d] ``` Де: | Розряд | Що враховується | Приклади | |---|---|---| | **a** | inline-стилі | `style=""` | | **b** | ID-селектори | `#header` | | **c** | класи, атрибути, псевдокласи | `.box`, `[type="text"]`, `:hover` | | **d** | селектори тегів і псевдоелементи | `div`, `p`, `::after` | --- ### **Як рахується** Селектор розбирається на частини, і кожна частина збільшує один з розрядів. Наприклад: | Селектор | Специфічність | |---|---| | `div` | 0,0,0,1 | | `.text` | 0,0,1,0 | | `#main` | 0,1,0,0 | | `header .menu li` | 0,0,1,2 *(1 клас + 2 теги)* | | `#main .menu li` | 0,1,1,1 | | `style="color:red"` | 1,0,0,0 | --- ### **Як порівнюються** Порівняння відбувається розряд за розрядом зліва направо: 1. спочатку порівнюється `a` (inline) 2. якщо рівні, `b` (id) 3. якщо рівні, `c` (класи) 4. якщо рівні, `d` (теги) Застосовується те правило, у якого більше число в першому розряді, що відрізняється. --- ### **Важливі винятки** - `!important` не бере участі у формулі, але **перебиває все**, крім іншого `!important` - `*` (універсальний селектор) **не додає ваги** - комбінатори (`>`, `+`, `~`, пробіл) також не впливають на вагу --- ### **Підсумок формули** **Специфічність =** `[a, b, c, d]`, де: - `a`: inline - `b`: ID - `c`: класи, атрибути, псевдокласи - `d`: теги і псевдоелементи Ця формула визначає, яке правило переможе при конфлікті стилів.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.