CSS идентификаторы и классы

— Способ, которым мы выбираем элементы для применения стилей называется селектор (с англ. selector). До сих пор для добавления стилей мы выбирали элементы по имени тега.

— Ну да, мы указывали, например, h1 или p и дальше перечисляли свойства CSS. А что, есть другой способ?

— Иногда, нам нужно сделать разные стили для одного и того же тега. Например, часть параграфов нужно красить в красный цвет, а другую часть - в черный. Для этого селектор по имени тега нам не подойдет и нужно будет использовать другой подход.

Идентификаторы

Когда нужно выделить один элемент из всех, ему можно добавить идентификатор с помощью атрибута id.

У идентификатора есть важная особенность. Он должен быть уникальным в рамках всего HTML документа. То есть значение атрибута id должно использоваться только один раз.

Попробуем добавить уникальный id второму параграфу.

<p>Параграф 1</p>
<p id="unique-paragraph">Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p>

Теперь нам надо выбрать этот параграф для применения стилей.

— Думаю для этого нам достаточно вместо имени тега p использовать unique-paragraph.

— Не совсем. Если ты попробуешь добавить стили таким образом, то браузер будет думать, что тебе нужен тег с именем unique-paragraph, которого не существует.

Для того, чтобы селектор по id работал правильно, мы должны добавить знак # перед идентификатором.

<style>
  #unique-paragraph {
    color: red;
  }
</style>

Такой стиль будет применен только к тегу с id="unique-paragraph" и изменим его цвет на красный.

Классы

— Но чаще тебе прийдется группировать разные элементы для применения стилей.

— Выделить, например, не один параграф, а два?

— Да. Давай те же четыре параграфа разобьем на две группы — четные и нечетные. Для этого каждому элементу нужно присвоить класс с помощью атрибута class.

В отличие от идентификатора, один и тот же класс может использовать для неограниченного количества элементов, а элементы будут объединены в группы по значению атрибута class.

Для выполнения задания нам нужны будут два класса - odd (в переводе с англ. - нечетные) и even (в переводе с англ. четные):

<p class="odd">Параграф 1</p>
<p class="even">Параграф 2</p>
<p class="odd">Параграф 3</p>
<p class="even">Параграф 4</p>

Селектор для классов немного отличается он идентификатора. Вместо символа # надо указать точку ., а далее значение атрибута class или просто имя css класса.

У нас будет два класса и два селектора: .odd и .even.

Давай у четных параграфов сделаем цвет текста зеленым, а у нечетных - красным:

<style>
  .odd {
    color: red;
  }
  .even {
    color: green;
  }
</style>

Одному и тому же тегу можно добавить несколько классов.

Например, для двух средних параграфов нам надо сделать шрифт 18px. Так как они относятся к разным классам, то мы не можем просто изменить стили. Нужно добавить еще один класс.

Добавление мы делаем в атрибуте class, разделяя разные классы пробелами.

<p class="odd">Параграф 1</p>
<p class="even large-font">Параграф 2</p>
<p class="odd large-font">Параграф 3</p>
<p class="even">Параграф 4</p>

И добавим еще один селектор в стили:

<style>
  .odd {
    color: red;
  }
  .even {
    color: green;
  }
  .large-font {
    font-size: 18px;
  }
</style>

— А раз у элемента может быть несколько классов, то можно ли делать селектор по нескольким классам?

— Можно. Для этого два селектора по имени класса нужно перечислить подряд. Без пробелов, запятых или других знаков препинания.

Если нужно добавить стили для всех HTML элементов, которые одновременно относятся к классам even и large-font, то селектор будет таким:

<style>
  .even.large-font {
    text-align: right;
  }
</style>

Внутри селектора мы добавили выравнивание текста по правому краю.

— Понятно.

— В предыдущих примерах мы группировали с помощью классов только однотипные теги. Но мы вполне можем объединить и разные теги в одну группу с помощью одного css класса. Например, добавим класс red-text одновременно и параграфу и заголовку:

<h1 class="red-text">Заголовок 1</h1>
<p class="red-text">Параграф 1</p>
<h1>Заголовок 2</h1>
<p>Параграф 1</p>

После этого, в стилях можно будет изменить цвет всех HTML элементов этого класса.

Есть еще огромное количество правил для селекторов, но о них немного позже. Сейчас самое время закрепить полученные знания на практике.