
Основные селекторы CSS
Селекторы объясняют браузеру, какие стили применить к элементу. Это основа CSS.
Чёткой иерархии деления селекторов нет. Каждый источник трактует по своему. Постараемся найти середину и сгруппируем их следующим образом:
- основные селекторы,
- составные,
- селекторы атрибутов,
- псевдоклассы,
- псевдоэлементы.
В этой заметке рассмотрим первую группу — основные селекторы. Верстальщик встречает их чаще всего. Это селекторы типа, класса, идентификатора и универсальный селектор.
Содержание
Селектор типа
Стиль применяется к HTML-элементам указанного типа. Иными словами, прямо к тегу. Например, чтобы задать базовые значения всем заголовкам первого уровня на сайте:
h1 { font-size: 1.875em; line-height: 1.075; }
Селектор класса
Применяется к элементам по имени, без привязки к тегу. CSS-класс определяется точкой перед именем:
.article-title { color: red; } .order-title { color: blue; }
Атрибутом class
определяется элемент, к которому применится стиль. В значении атрибута точка не нужна:
<h1 class="article-title">My cool article</h1> <h1 class="order-title">My cool order</h1>
На сайте используется один и тот же тег для заголовков. Но в статьях они будут красного цвета, а в заказах — синего, благодаря разным классам.
Селектор идентификатора
Как и селектор класса, привязывается к элементу по имени. Определяется диезом:
#element-id { color: red; }
Атрибутом id
определяется элемент, к которому применится стиль:
<h1 id="element-id">My cool article</h1>
У стилей идентификатора наивысший приоритет.
Значения стилей id перебьют значения класса, вне зависимости от порядка записи в CSS. Можете поменять местами, результат не изменится:
#element-id { color: red; } .page-title { color: blue; }
Порядок записи атрибутов не имеет значения. Текст будет красным.
<h1 class="page-title" id="element-id">My cool page</h1>
Имя идентификатора уникальное
Имя идентификатора должно использоваться на странице единожды. Если встречается повтор имён id, нужно переделать их в классы.
Неправильно:
<div id="some-name">...</div> <div id="some-name">...</div>
Правильно:
<div class="some-name">...</div> <div class="some-name">...</div>
Популярно ошибочное мнение, что через id
стили присваиваются «одноразовым» блокам: шапке, логотипу или подвалу.
#site-header {...} #site-logo {...} #site-footer {...}
Попробуем воспроизвести ход мыслей, из-за которых рождается такое решение:
- Айди может быть только один — это уникальное значение.
- Шапка на сайте только одна, значит это уникальный элемент.
- Получается, шапке стили напишем через идентификатор, ведь они больше нигде не будут использоваться.
Внедрять id
для декорации элементов — признак дилетантской вёрстки. Не используйте #ID в CSS. Используйте его по прямому назначению: для идентификации полей ввода, якорных ссылок или яваскрипта.
Универсальный селектор — *
Применяется ко всем элементам на странице. Следующая запись в таблице стилей добавит каждому элементу красную рамку:
* { border: solid 1px red; }
Я знаю только одно практическое применение этому селектору — задать всем элементам на сайте border-box:
*, *::before, *::after { box-sizing: border-box; }
Бытует мнение, что использование уникального селектора сильно нагружает браузер. Но в любом файле CSS есть более «тормозные» конструкции, нежели звёздочка.
Производительность CSS рассмотрим подробно в другой раз. Подписывайтесь на канал в Телеграме, чтобы не пропускать публикации.