Специфіка

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

Це може здатися не таким вже і важливим, і в більшості випадків такі конфлікти ніяк не виявляються. Але в міру того, як CSS файли ростуть у розмірі та складності, ви почнете працювати з декількома окремими CSS-файлами. І тоді ризик появи конфліктів збільшується значно.

Якщо два селектора ідентичні, тоді завжди пріоритет отримає останній з них. Наприклад, у вас є:

1 p  color: red;
2 p  color: blue;

Елемент p завжди буде синього кольору, тому що відповідне правило зазначено останнім.

Тим не менше, люди зазвичай не використовують ідентичні і конфліктуючі селектори спеціально (тому що це безглуздо). Конфлікти цілком можуть з’явитися, коли у вас є вкладені селектори. Розгляньте наступний приклад:

1 div p  color: red;
2 p  color: blue;

Виглядає так, ніби елементи p в межах елементу div будуть показані синім кольором, тому що правило, яке встановлює колір p, зазначено останнім. Однак насправді вони будуть показані червоним кольором через специфічність першого селектора. Говорячи простою мовою, пріоритет у конфліктних ситуаціях збільшується разом зі специфікою селектора.

Справжня специфіка групи вкладених елементів вимагає обчислень. По суті, ви прирівнюєте кожен селектор id (“#anything”) до значення 100, кожен селектор class (“.anything”) до 10, а кожен селектор HTML (“anything”) до 1. Потім ви складаєте їх значення, а загальний результат і буде вашим значенням специфіки.

  • p має специфіку 1 (1 HTML селектор)
  • div p має специфіку 2 (2 HTML селектора; 1 +1)
  • .tree має специфіку 10 (1 селектор class)
  • div p.tree має специфіку 12 (2 HTML селектора і 1 селектор class; 1 +1 +10)
  • #baobab має специфіку 100 (1 селектор id)
  • body #content .alternative p має специфіку 112 (HTML селектор, id селектор, class селектор, HTML селектор, 1 +100 +10 +1)

Таким чином, у разі, якщо всі ці приклади будуть використані, div p.tree (зі специфікою 12) буде більш специфічний, ніж div p (зі специфікою 2), а body #content .alternative p буде більш специфічний, ніж всі вони, незалежно від порядку.