Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що означає термін «специфічність» у CSS?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Специфічність у CSS, це **система «ваг»**, за якою браузер визначає, яке правило важливіше, якщо два або більше правил збігаються і намагаються змінити одну й ту саму властивість одного й того самого елемента.

Простіше кажучи: специфічність, це **точність селектора**. Чим точніше правило вказує на елемент, тим вищий пріоритет має це правило.

---

### **Як рахується специфічність (за рівнями)**

Від більшої ваги до меншої:

1. **ID-селектори** (`#header`)
2. **Класи, атрибути, псевдокласи** (`.block`, `[type="text"]`, `:hover`)
3. **Тегові селектори і псевдоелементи** (`div`, `p`, `::before`)

Inline-стилі формально стоять ще вище за всі селектори, але зазвичай не входять до розрахунку специфічності. А `!important` перебуває взагалі поза цією системою і перебиває все.

---

### **Приклад порівняння**

```css
p { color: blue; }          /* тег, низька вага */
.text { color: green; }     /* клас, вища */
#main { color: red; }       /* id, найвища */
```

Підсумковий колір буде `red`, якщо всі селектори застосовуються до одного й того самого елемента.

---

### **Коли специфічність вирішує результат**

Якщо два правила рівні за рівнем, тоді вступає в дію **порядок у коді**, перемагає написане останнім.

---

### **Підсумок**

Специфічність, це механізм пріоритету CSS-селекторів. Він потрібен, щоб браузер міг однозначно вирішити, яке правило застосувати, коли є кілька варіантів.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати197 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.