Вес селекторов в CSS⁠⁠

Привет, в этом уроке мы на примерах рассмотрим как работает вес и приоритетность селекторов. Текстовое описание урока в полной версии статьи.

Вес селектора - так как у нас в CSS есть огромное количество способов обращения к элементу по селектору, а селектор мы придумываем сами, внутри браузер разделяет их по весу, и отдает приоритет тем стилям вес селектора которых 'тяжелее'.

Селекторы по весу:

1. inline стили (те которые мы пишем внутри атрибута style для тега)

2. #id (селектор id)

3. .class (селектор class и любых других атрибутов кроме id)

4. <tagName> (название тега)

Так как мы можем комбинировать селекторы то и их вес тоже будет складываться.

Пример #1

Пытаемся изменить цвет текста у которого уже написаны inline стили

#p1 {
color: red;
}

Как видим цвет этого элемента не изменился, так происходит потому что у селектора inline стилей селектор тяжелее чем у селектора id, а значит браузер отдаст приоритет селектору inline стилей, а стили которые связаны с id этого элемента будут проигнорированы.

Аналогично будет происходить если мы будем пробовать обратится по классу, тегу или каким-то другим образом.

.p1 {
color: red;
}

[title="p1"] {
color: red;
}

Как видим, ни одно из перечисленных css правил не сработало.

Пример #2

Работаем с элементов #p2 у которого нет inline стилей.

Задам ему цвет через селектор id.

#p2 {
color: deeppink;
}

Пробуем изменить стили через селектор class

.p2 {
color: blueviolet;
}

и другие селекторы

[title="p2"] {
color: blueviolet;
}
p {
color: blueviolet;
}

Как видим цвет элемента не изменился, а остался таким как был задан в селекторе через id это происходит потому что id имеет больше вес чем остальные селекторы, а на текущем элементе нет никаких inline стилей которые могли бы изменять его цвет.

Пример #3

Что делать если наши селекторы одинаковые по весу?

Представим себе ситуацию, у нас есть элемент p3 у которого есть несколько классов и для каждого и этих классов написаны свои стили.

.p3-first {
color: red;
}
.p3-second {
color: green;
}

Так как вес этих селекторов одинаковый то в приоритете будут те стили что написаны ниже в файле .css

Файлы с урока - ссылка

Мой youtube

Мой telegram канал