Какой селектор приоритетней, Class или Id?

Приоритет селекторов CSS: ID vs Class

ID селектор имеет больший приоритет (специфичность), чем class селектор. Это одна из фундаментальных правил CSS.

Понятие специфичности (Specificity)

Специфичность — это вес, с которым браузер применяет CSS правила к элементам. При конфликте двух правил браузер применяет то, у которого выше специфичность.

Приоритет селекторов (от наименьшего к наибольшему):

1. Элемент (tag) — div, p, a — специфичность 1
2. Класс (.class) — .button, .active — специфичность 10
3. Атрибут ([attr]) — [type="text"] — специфичность 10
4. Псевдокласс (:hover) — :hover, :focus — специфичность 10
5. ID (#id) — #header, #main — специфичность 100
6. Inline стили — style="..." — специфичность 1000
7. !important — переопределяет всё — специфичность бесконечность

Пример: ID побеждает Class

/* Class селектор */
.button {
  color: blue;
  padding: 10px 20px;
}

/* ID селектор */
#submit-button {
  color: red;  /* Это правило применится! */
}

<button id="submit-button" class="button">Отправить</button>

Кнопка будет красной (color: red), потому что ID имеет больший приоритет, чем class.

Вычисление специфичности

Специфичность записывается как (a, b, c), где:

• a — количество ID селекторов (вес 100)
• b — количество class селекторов, атрибутов, псевдоклассов (вес 10)
• c — количество элементов (вес 1)

Примеры:

/* div — специфичность (0, 0, 1) */
div { }

/* .button — специфичность (0, 1, 0) = вес 10 */
.button { }

/* #header — специфичность (1, 0, 0) = вес 100 */
#header { }

/* div.button:hover — специфичность (0, 2, 1) = вес 21 */
div.button:hover { }

/* #header .button — специфичность (1, 1, 0) = вес 110 */
#header .button { }

/* #header .nav .button:active — специфичность (1, 2, 1) = вес 121 */
#header .nav .button:active { }

Сравнение примеров

/* Специфичность (0, 1, 0) — проиграет */
.button {
  background: blue;
}

/* Специфичность (1, 0, 0) — выиграет */
#my-button {
  background: red;  /* Применится это */
}

<button id="my-button" class="button">Кнопка</button>

Кнопка будет красной.

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

/* Специфичность (0, 1, 0) */
.card {
  padding: 20px;
  border: 1px solid gray;
}

/* Специфичность (0, 2, 0) */
.card.active {
  border-color: blue;
}

/* Специфичность (1, 0, 0) — переопределит оба */
#featured-card {
  border-color: gold;
}

Даже если элемент имеет оба класса, ID селектор выиграет.

Антипаттерн: избыточная специфичность

Не делай так:

/* ❌ Слишком специфично */
body div.container #main .button:hover {
  color: red;
}

Это создаёт проблемы:

1. Сложно переопределить потом
2. Код меньше переиспользуется
3. Зависимость от структуры HTML

Делай так:

/* ✅ Простой и понятный селектор */
.button:hover {
  color: red;
}

Когда использовать ID селекторы

ID селекторы имеют гораздо выше специфичность, но это не значит их нужно использовать везде. Рекомендуется:

• Использовать ID для уникальных элементов на странице (шапка #header, футер #footer, основной контент #main)
• Использовать классы для повторяющихся компонентов (кнопки, карточки, модальные окна)
• Избегать ID в CSS, если нет необходимости (лучше переиспользуемые классы)

!important: ядерный вариант

/* Это переопределит практически всё, кроме другого !important */
.button {
  color: red !important;
}

#special-button {
  color: blue; /* Не поможет */
}

Но !important считается плохой практикой, потому что:

1. Затрудняет отладку
2. Усложняет переопределение стилей
3. Скрывает реальные проблемы специфичности

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

В DevTools браузера при инспекции элемента можно увидеть все применённые стили и их специфичность. Перечёркнутые правила — это те, которые переопределены более специфичными селекторами.

Итоговое правило

ID > Class > Element

ID имеет вес 100, class имеет вес 10, элемент имеет вес 1. Поэтому даже одна ID селектор с простым элементом (1, 0, 0) переопределит множество класс селекторов вроде (0, 10, 0).