​​Специфичность CSS

Не самый простой для многих вопрос, который для некоторых разработчиков даже Middle уровня будет фатальным. Но не для нас 🙂

Итак, специфичность указывает на то, какой стиль будет применён к элементу. На это влияет три показателя:
— Место определения селектора
— Вес селектора
— Директива !important

Разберем их по порядку:
• Специфичность выше, если свойство объявлено ниже. То есть в примерах

body {
 color: black;
 color: red;
}

div {
 width: 100px;
}

div {
 width: 400px;
}

Элемент body будет иметь правило color: red;, а элемент div будет иметь правило width: 400px;, так как эти свойства объявлены ниже и "перезаписали" вышеописанные свойства.

• Вес селектора — это величина, которую считают по разному. Есть как минимум два способа, но тут главное понять принцип. Я расскажу только об одном из них.

Каждый тип селектора имеет свой вес:
Тег — 1
Класс — 10
ID — 100
Inline — 1000

Посчитаем вес селектора на примере:

div = 1 
div.className = 1 + 10 == 11 
#id .className = 100 + 10 == 110
div > span = 1 + 1 == 2 

К элементу применяются свойства от селектора, который имеет самый высокий вес. Если вес селекторов одинаковый, то применяется тот селектор, что описан позже.

• Но если в селекторе с меньшим весом или объявленном выше к свойству применить директиву !important, то в таком случаем специфичность такого правила будет максимальной и применится то правило, что помечено директивой.
Запись выглядит так:

div {
 color: red !important;
}

div {
 color: blue;
}

В примере к элементу div будет применено правило color: red;.
Использование этой директивы является плохим тоном и оправдано только в самых крайних случаях.

Спасибо за прочтение. Это важно для меня.

#web #theory