Основные селекторы 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 {...}

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

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

Внедрять id для декорации элементов — признак дилетантской вёрстки. Не используйте #ID в CSS. Используйте его по прямому назначению: для идентификации полей ввода, якорных ссылок или яваскрипта.

Универсальный селектор — *

Применяется ко всем элементам на странице. Следующая запись в таблице стилей добавит каждому элементу красную рамку:

* {
    border: solid 1px red;
}

Я знаю только одно практическое применение этому селектору — задать всем элементам на сайте border-box:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Бытует мнение, что использование уникального селектора сильно нагружает браузер. Но в любом файле CSS есть более «тормозные» конструкции, нежели звёздочка.

Производительность CSS рассмотрим подробно в другой раз. Подписывайтесь на канал в Телеграме, чтобы не пропускать публикации.