Каскадування стилів в css

Raisa Kravets -

 


Каскадування — це правила, за якими браузер вибирає, який саме стиль застосувати, якщо для одного й того самого елемента написано кілька різних стилів.

Уяви каскад, як водоспад: вода стікає зверху вниз. Так само і стилі — браузер читає CSS зверху вниз і вирішує, що головніше.

🎯 На що дивиться браузер, коли вирішує, який стиль застосувати?

Є три головні правила каскаду:

1️⃣ Пріоритетність (Specificity) — хто важливіший?

Тип селектораСила (важливість)
🔴 inline-стилі (style="…")найсильніші
🔵 ID (#title)дуже сильні
🟢 Класи, псевдокласи (.box, :hover)середні
🟡 Теги (h1, p)слабкі
⚪ Зірочка *найслабша


Приклад:

➡️ Текст буде оранжевим, бо ID — найсильніший.

2️⃣ Порядок запису — що нижче, те важливіше

Якщо селектори мають однакову силу, виграє той, що написаний нижче.


👉 Текст буде синій, бо цей стиль вказаний нижче.

3️⃣ Важливість: !important

Це як “роби так, як я сказав!”

➡️ Переможе навіть ID і inline-стилі.

Але ❗ !important використовують лише у виняткових випадках.

Конфлікт стилів у CSS (каскадування)

  1. Коли елемент підпадає під декілька правил CSS, браузер обирає стиль за пріоритетом селектора:
  2. Якщо кілька селекторів однакового типу — застосовується правило, яке вказане пізніше в коді.
Приклад:
#main { color: blue; } /* ID = 3 */
  • ID має вищий пріоритет, тому текст стане синім.
  • Якщо ми хочемо, щоб клас “переміг” без !important, треба змінити селектор або порядок CSS, наприклад:
Висновок:
  1. Клас не може “перемогти” ID, якщо не зробити селектор більш специфічним.
  2. Inline-стиль завжди сильніший за будь-який селектор (якщо не використовується !important).
  3. !important переможе все інше.

Тип селектора

Пріоритет

Тег (p, h1, div…)

1

Клас (.class)

2

ID (#id)

3

Inline (style="…")

4

!important

5

.green { color: green; }  /* клас = 2 */
#main { color: blue; }    /* ID = 3 */
➡️ ID має вищий пріоритет, тому текст стане синім.
Якщо ми хочемо, щоб клас “переміг” без !important, треба змінити селектор або порядок CSS, наприклад: 
h1.green { color: green; } /* більш специфічний селектор */ 

або
 
#main.green { color: green; } /* поєднання ID + клас = сильніше */

 ✔️ Приклад 1: Пріоритетність селекторів

See the Pen cascad-id by raisa_kravets (@raisa69) on CodePen.

🔎 Результат: текст буде червоний (ID перемагає).

✔️ Приклад 2: Хто нижче — той і виграв

See the Pen cascade-lower-css by raisa_kravets (@raisa69) on CodePen.

➡️ orange.

✔️ Приклад 3: Inline-стиль сильніший за CSS-файл

See the Pen cascade-inline-css by raisa_kravets (@raisa69) on CodePen.

➡️ Текст буде коричневий.

✔️ Приклад 4: !important перемагає всіх

See the Pen cascade-important-css by raisa_kravets (@raisa69) on CodePen.

➡️ Текст буде зелений.

У CSS є “змагання стилів”.
Коли кілька стилів хочуть змінити один і той самий елемент, браузер обирає переможця.

Переможе той стиль, який:

  1. найважливіший (important → inline → id → class → тег → *)

  2. має більшу силу селектора

  3. написаний нижче, якщо сила однакова

📝 ПРАКТИЧНІ ЗАВДАННЯ: 

Автоперевірка: Каскадування стилів у CSS

Завдання 1. Хто переможе?

1.1

<p id="t" class="blue">Привіт!</p>
p { color: green; }
.blue { color: blue; }
#t { color: red; }

1.2

p { color: pink; }
p { color: purple; }

1.3

<p style="color: brown;">Текст</p>
p { color: black; }

1.4

<p class="note">Нагадування</p>
p { color: orange; }
.note { color: gray !important; }

Завдання 2. Виправ стиль

<h2 id="title" class="blue">Заголовок</h2>
.blue { color: blue; }
#title { color: red; }

Завдання 3. Створи свій приклад

Завдання 4. Пріоритет CSS-селекторів (числа від 1 до 5)

Визначте числовий пріоритет для кожного селектора:

Завдання 5. Виправ стиль без !important

<h1 id="main" class="green">Тема</h1>
.green { color: green; }
#main { color: blue; }
Tags:
Нові Старіші