Что такое вес селектора?

Что такое вес селектора

Вес селектора (CSS specificity) — это система приоритетов в каскадной таблице стилей CSS, которая определяет, какой стиль будет применён к элементу, когда есть конфликтующие правила.

Система подсчёта

Вес селектора вычисляется по формуле из четырёх значений:

a, b, c, d

Где:

• a — встроенные стили (style="...")
• b — количество ID селекторов (#id)
• c — количество классов, атрибутов и псевдоклассов (.class, [attr], :hover)
• d — количество элементов и псевдоэлементов (div, p, ::before)

Примеры подсчёта

/* 0,0,0,1 — один элемент */
p { color: blue; }

/* 0,0,1,0 — один класс */
.highlight { color: red; }

/* 0,1,0,0 — один ID */
#main { color: green; }

/* 1,0,0,0 — встроенный стиль */
/* style="color: purple;" */

/* 0,1,1,2 — ID + класс + 2 элемента */
#header .nav-item p { font-size: 14px; }

/* 0,0,2,1 — 2 класса + 1 элемент */
.container.active p { margin: 10px; }

/* 0,0,3,1 — 3 класса + 1 элемент */
.btn.btn-primary.btn-lg span { padding: 12px; }

Порядок приоритета

Чем выше вес, тем выше приоритет:

Встроенный стиль           > 1,0,0,0
ID селектор                > 0,1,0,0
Класс / атрибут / псевдо   > 0,0,1,0
Элемент                    > 0,0,0,1
Наследование               > нет веса
Тег браузера               > минимальный приоритет

Практические примеры

/* Вес: 0,0,0,1 */
p { color: blue; }

/* Вес: 0,0,1,0 — переопределит p */
.text { color: red; }

/* Вес: 0,0,0,1 — НЕ переопределит p.text, т.к. .text имеет больший вес */
p { color: green; }

/* Вес: 0,1,0,0 — переопределит всё */
#main { color: yellow; }

/* Вес: 0,0,0,0 — НЕ переопределит, наследование слабее */
body { color: purple; }

!important — максимальный приоритет

/* Это переопределит ВСЕГДА, даже встроенные стили */
p { color: red !important; }

/* Встроенный стиль не переопределит */
/* style="color: blue;" */
/* Результат: red !important (если нет !important в элементе) */

Внимание: использование !important считается плохой практикой, т.к. усложняет отладку.

Сложные примеры

/* Вес: 0,1,2,1 */
#header .nav.active a { text-decoration: underline; }
/* ID(1) + классы(2) + элемент(1) = 0,1,2,1 */

/* Вес: 0,0,1,3 */
.container .row .col p { margin: 0; }
/* классы(1) + элементы(3) = 0,0,1,3 */

/* Вес: 0,1,3,1 */
#app .modal .modal-header .title { font-size: 24px; }
/* ID(1) + классы(3) + элемент(1) = 0,1,3,1 */

Псевдоклассы и псевдоэлементы

Псевдоклассы считаются как классы (вес +0,0,1,0):

a:hover { color: red; }        /* 0,0,1,1 */
input:focus { border: 2px; }   /* 0,0,1,1 */
.btn:active { transform: scale(0.95); } /* 0,0,2,0 */

Псевдоэлементы считаются как элементы (вес +0,0,0,1):

p::before { content: ">"; }    /* 0,0,0,2 */
.box::after { content: ""; }   /* 0,0,1,1 */

Каскадность (Cascade)

Если вес одинаков, применяется последний определённый стиль:

/* В CSS файле выше */
p { color: blue; }

/* В CSS файле ниже */
p { color: red; } /* Это будет применено (позже в каскаде) */

Лучшие практики

1. Избегайте глубокой вложенности селекторов — ненужно усложнять вес

   /* Плохо */
   .container > .row > .col > .text { color: red; }
   
   /* Хорошо */
   .text { color: red; }
   

2. Не используйте ID селекторы для стилей — слишком высокий приоритет

   /* Плохо */
   #button { padding: 10px; }
   
   /* Хорошо */
   .button { padding: 10px; }
   

3. Используйте BEM методологию — консистентность и ясность

   .block { }
   .block__element { }
   .block__element--modifier { }
   

4. Избегайте !important — только в исключительных случаях

5. Используйте классы вместо типов элементов — более гибко

Инструменты для отладки

В DevTools браузера можно посмотреть

• Какие стили применены
• Какие перекрыты
• Вес каждого селектора

Итог: вес селектора — это основа каскадности CSS. Понимание этой системы критично для написания предсказуемых стилей и эффективной отладки.