Специфика селекторов в CSS.

Специфика CSS - это про то, какие стили применяются к элементам: чем конкретнее селектор CSS, тем больше веса он имеет при определении стиля элемента.

Возьмем следующий HTML и CSS в качестве примера:

<article id="css-rocks">
...
</article>

<style>
#css-rocks {
background-color: white;
}
article {
background-color: black;
}
</style>

Побеждает белый цвет, так как селектор id более специфичен и имеет больший вес.

Существует пять основных уровней, которые определяют специфику стиля, от наименее специфического к наиболее специфичному:

1. Элемент

article {
background-color: black;
}

2. Класс

.css-class {
background-color: black;
}

3. ID

#css-id {
background-color: black;
}

4. Inline стили

<article style="background-color: black;"> ... </article>

5. !important

article {
background-color: black !important;
}

Можно использовать комбинацию этих атрибутов.

Тут вступает в действие система весов.

Поскольку пять различных факторов влияют на специфичность CSS, мы используем пять чисел, чтобы отслеживать, сколько раз мы видим тип селектора. Мы начинаем вес с нулевой специфичностью, которая представлена как (0, 0, 0, 0, 0). Это: !important, Inline, ID, Класс, Элемент. При наличии уровня выставляется единица.

Пример:

<article id="css-rocks">
<section class="css-history">
...
</section>
</article>

<style>
#css-rocks section {
background-color: black;
}
article#css-rocks section.css-history {
background-color: white;
}
</style>

#css-rocks section будет весить 0, 0, 1, 0, 1

article#css-rocks section.css-history рассчитать немного сложнее.

Для этого воспользуемся таблицей

Селектор: | Тип: | Вес:
article | Element | (0, 0, 0, 0, 1)
#css-rocks | Id | (0, 0, 1, 0, 1)
section | Element | (0, 0, 1, 0, 2)
.css-history | Class | (0, 0, 1, 1, 2)

Получаем финальный вес 0, 0, 1, 1, 2

Сравним два смешанных селектора:

#css-rocks section: 0, 0, 1, 0, 1

article#css-rocks section.css-history: 0, 0, 1, 1, 2

Второй имеет больший вес, значит победит белый фон.

Что произойдет, если два стиля имеют одинаковую специфику ?

Тот, который объявлен позже, побеждает.

article {
background-color: black;
}
article {
background-color: white;
}

Побеждает белый фон.

Атрибут !important применяется не ко всем стилям в селекторе, а только к тому стилю, к которому приставлен.

article .css-history {
background-color: black !important; /* (1, 0, 0, 1, 1) */
color: white; /* (0, 0, 0, 1, 1) */
}

Полезные советы:

1. При попытке переопределить стиль, проверьте, не мешают ли этому излишние id.
2. Используйте вспомогательные классы. Например, если элементу .card необходимо задавать разные цвета фона, добавьте дополнительные классы, соответствующие цвету фона.
3. В каких случаях использовать !important. Желательно, только в экстренных. Например, когда срочно надо поправить стиль перед презентацией. Использовать как временную меру.

Вредные советы:

1. Используйте несколько идентификаторов в одном селекторе. Это запутает всех, кто будет читать ваш код, в том числе и вас.

#css-rocks#css-rocks {
background-color: black; /* (0, 0, 2, 0, 0) */
}
#css-rocks {
background-color: white; /* (0, 0, 1, 0, 0) */
}

2. Если этого недостаточно для крупного пакостника, то попробуйте вот что:

<article style="background-color: banana !important;">
...
</article>

Теперь ваш стиль невозможно переопределить через CSS файл.

Данная статья подготовлена по источнику:

Colin Miller. The Basic Guide to CSS Specificity.