Урок 74 із 239
31%
← Назад

Правила специфічності в CSS

Розберемо правила специфічності CSS-селекторів та дізнаємося, який стиль переможе при конфлікті.

Що таке специфічність CSS

Якщо одному елементу відповідає декілька CSS-селекторів, а властивості конфліктують, браузер вибирає більш специфічний (точніший) селектор.

Чим точніше ми описали елемент, тим більший пріоритет має цей селектор.

Правило №1. Клас перемагає селектор тега

<p class="text">
  text
</p>
p {
  color: red;
}

.text {
  color: green;
}
💡 Показати підказку

Клас .text завжди має більший пріоритет, ніж звичайний селектор p, div, h1 тощо.

Правило №2. ID перемагає клас

<p id="elem" class="text">
  text
</p>
.text {
  color: red;
}

#elem {
  color: green;
}
💡 Показати підказку

ID використовується для унікального елемента і має більшу специфічність, ніж клас.

Правило №3. При однакових умовах перемагає точніший селектор

<div>
  <p>
    text
  </p>
</div>
p {
  color: red;
}

div p {
  color: green;
}

Специфічність селекторів з класами

<div class="block">
  <p class="text">
    text
  </p>
</div>
.text {
  color: red;
}

.block .text {
  color: green;
}
❗ Важливо:

При підрахунку специфічності селектори тегів мають найменший пріоритет. Класи сильніші за теги, а id сильніший за класи.

Практичні завдання

📌 Завдання:
  1. 1. Визначте, який колір буде у тексту:
  3. <p class="text">text</p>
  5. p {
  6. color: red;
  7. }
  9. .text {
  10. color: green;
  11. }
📌 Завдання:
  1. 2. Визначте, який колір буде у тексту:
  3. <p id="elem" class="text">text</p>
  5. .text {
  6. color: red;
  7. }
  9. #elem {
  10. color: green;
  11. }
📌 Завдання:
  1. 3. Визначте, який колір буде у тексту:
  3. <div>
  4. <p>text</p>
  5. </div>
  7. p {
  8. color: red;
  9. }
  11. div p {
  12. color: green;
  13. }
💡 Показати підказку

Порівнюйте селектори за силою: тег → клас → id. Якщо сила однакова — перемагає той, що написаний нижче.

✅ Показати відповідь
1) green, тому що клас сильніший за тег. 2) green, тому що id сильніший за клас. 3) green, тому що div p точніший за p.