en / ru

Приоритеты свойств в CSS

У тех, кто только начинает знакомиться с CSS часто возникает вопрос "А почему применяется одно свойство, а не другое?". Действительно, часто на один тэг HTML приходится сразу несколько одинаковых свойств с различными значениями. Вот и встает вопрос, какое свойство применит браузер.

В этом и заключается суть каскадности CSS (каскадная таблица стилей).

Свойства CSS для элементов могут определяться и в последствии переопределяться новыми значениями. Впрочем, переопределением считается и первое задание свойства, т.к. браузер по умолчанию сам прописывает базовые значения свойств для тэгов.

Что же происходит, когда мы задаем свои значения CSS свойств?

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

Чтобы наглядно представлять суть определения приоритета (или другими словами - специфичность), используем следующую конструкцию: 0.0.0.0.
А теперь вспомним способы задания свойств (адрессация CSS): тэг, класс, ID, style. Так и заполняем нашу конструкцию, но только в обратном порядке: style.ID.класс.тэг.

Конструкция, которая указывает, к какому элементу применяется свойство, называется селектором. Приоритет вычиcляется для всего селектора.

Пример 1: div { ... }

Селектор состоит из 1 тэга, значит специфичность его: 0.0.0.1

Пример 2: div p { ... }

Селектор состоит из 2 тэгов, значит специфичность его: 0.0.0.2

Получается, что если в примерах 1 и 2 встречаются одинаковые CSS свойства, но с различными значениями, то к тэгу <p> применится свойство из конструкции 2, имеющее больший приоритет (специфичность задания адреса элемента).

Пример 3: .block p { ... }

Селектор состоит из 1 класса и 1 тэга, значит специфичность его: 0.0.1.1. Это больше, чем 0.0.0.2, т.к. мы имеем единицу в более значимом разряде (примерно как числа 10+1 и 1+1).

Пример 4: div.block p { ... }

Селектор состоит из 1 класса и 2 тэгов, значит специфичность его: 0.0.1.2.

Пример 5: #home p { ... }

Селектор состоит из 1 ID и 1 тэга, и он имеет еще больший приоритет, чем любой из предыдущих примеров, т.к. его специфичность равна 0.1.0.1 (условно можно считать как 0+100+0+1).

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

Однако, дабы иметь возможность переопределить значение аттрибута style="" средствами CSS, имеется усилитель свойства !important.

Пример 6: <div style="color:blue;"> может быть переопределен из CSS: div {color:black !important;}

А вот если !important использовать внутри style="", то уже ничто не поможет. Потому, как бы ни было сильно наше эго, не стоит так делать, так как вполне может появиться ситуация, когда свойство необходимо будет переопределить, а изменять HTML нельзя.

Однако не надо путать наследование с каскадностью. Что я имею ввиду? Смотрите:

Пример 7: Пропишем свойства #main {color:red;} и strong {color:black;}.

Текст внутри блока #main станет красного цвета, но если внутри него встретится тэг <strong>, то в нем текст будет черным, т.к. его свойства имеют более локальный характер. В то же время, если тэг <strong> имеет id="main", то текст в нем будет красным, согласно приоритету определяемых свойств, о котором мы говорили выше.

При равном приоритете (весе) CSS свойств применится то правило, которое идет ниже по коду.

Пример 8: Имеем html <div class="item main"> и стили:
.item {color:red;}
.main {color:black;}

В результате текст в нашем div будет черным (black). Порядок следования классов в html значения не имеет.


 
Псевдоклассы. Псевдоклассы (:first-child, :last-child, :nth-child) имеют приоритет больше, чем обычные классы.

Пример 9: Имеем html <div class="item"> и стили:
div:first-child {background: #f00;}
.item {background: #000;}

Данный div будет иметь цвет фона #f00 (конечно, если он действительно является first-child). Но если мы второе правило изменим на div.item то оно получит больший приоритет, чем правило с псевдоклассом.

Небольшой совет по псевдоклассам: без особой необходимости не используйте псевдокласс :link для ссылок. Однажды прописав свойства для a:link, при переопределении вам придется использовать тот же псевдокласс :link, либо опираться на классы.


CSS-tricks: 19 ways to override (обратите внимание на 7, 14, 16, 18)


Инструмент наглядной проверки специфичности селектора: CSS explain