CSS Пріоритет

До одного HTML елементу можна написати різні CSS правила. Послідовніть, в якій вони будуть застосовуватись, і як наслідок, які властивості будуть перекривати попередні, визначається пріоритетами CSS селекторів.

Пріорітет базових селекторів

Базові селектори будуть застосовуватись в такій послідовності:

1. селектор за тегом section
2. селектор за классом .feature-block
3. селектор за id #open-source

Стилі, описані в селекторі по id, мають більший пріорітет і перекриють попередні властивості. Навіть якщо в СSS файлі після нього йтиме селектор по класу чи за тегом.

<section id="open-source" class="feature-block"> ... </section>

<style>

section { color: red; }

#open-source { color: blue; }

.feature-block { color: green; }

</style>

В прикладі вище текст в секції буде кольору blue, як вказано в селекторі по id #open-source.

Комбіновані селектори

При комбінації різних селекторів більший пріорітет матимуть більш специфічні селектори.

Комбіновані селектори будуть застосовуватись в такій послідовності:

1. section
2. section.feature-block
3. section#open-source
4. section.feature-block#open-source

Більше прикладів на сторінці https://marksheet.io/css-priority.html