Бесплатный курс по CSS. Зарегистрируйтесь для отслеживания прогресса →

CSS: Приоритет стилей

Говоря о каскадности, возникает вопрос: «А что произойдёт, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:

  • Стили в атрибуте тега
  • Стили в отдельном файле
  • Стили по умолчанию, которые добавляет браузер

Значения, указанные в атрибуте style будут важнее свойств в теге <style>, а они будут важнее стандартных стилей браузера.

Приоритеты селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета.

Разберём на примере. Создадим параграф с классом red и идентификатором blue

<p id="blue" class="red">Текст с классом red и идентификатором blue</p>

Добавим противоречащие друг другу стили для класса, идентификатора и тега:

p {
  color: black;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

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

У селекторов также существуют приоритеты. Условно можно расставить селекторы в следующем порядке по приоритету:

  1. Селектор по идентификатору (#blue)
  2. Селектор по классу (.red)
  3. Селектор по тегу (p)

Где 1 — самый высокий приоритет, а 3 — самый низкий.

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

Это легко запомнить, если селекторы небольшие, но они могут быть сложнее. В качестве селектора может быть комбинация классов, тегов и так далее. Например:

<p class="paragraph color-primary">Параграф</p>
.paragraph.color-primary {
  color: blue;
}

Здесь использовался селектор из двух классов сразу. Это означает, что стили будет применяться только для элемента, у которого есть оба класса. Такое разделение помогает разработчикам точечно устанавливать стили для схожих элементов. Например:

<p class="paragraph color-primary">Параграф</p>
<p class="paragraph">Параграф</p>
<p class="paragraph color-primary">Параграф</p>
.paragraph {
  color: red;
}

.paragraph.color-primary {
  color: blue;
}

В этом примере все параграфы с классом paragraph будут иметь красный цвет текста, но если дополнительно установлен класс color-primary, то цвет будет голубой. Почему так происходит? У таких селекторов так же есть свои приоритеты. В сложных селекторах считается количество вхождений тех или иных селекторов и считается суммарный вес.

Для определения приоритета можно использовать таблицу, где каждому селектору даётся «вес»:

  • Селектор по тегу: 1
  • Селектор по классу: 10
  • Селектор по ID: 100
  • Стиль в атрибуте тега: 1000

Чтобы узнать, какой селектор будет иметь больший вес, нужно, по этой таблице, сложить все полученные значения.

  • Селектор .paragraph состоит из одного класса, а значит его вес — 10
  • Селектор .paragraph.color-primary состоит из двух классов. Его вес — 20

Таким образом свойства у селектора .paragraph.color-primary будут иметь больший приоритет, чем внутри селектора .paragraph.

Эта таблица не является полноценной истинной, но ей можно пользоваться на первых этапах изучения CSS. С практикой вы научитесь самостоятельно определять приоритет селекторов

Задание

Добавьте в редактор параграф с классом border и id no-border. Установите следующие правила:

  • Для класса border установите сплошную рамку любого цвета толщиной 1px. Это можно сделать так: border: 1px solid #000;
  • Для id no-border отмените рамку. Используйте значение none у правила border-style

Первым укажите стили для селектора .border, вторым селектор #no-border

Стили запишите в теге <style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе