CSS селекторы: ID и CLASS

Селектор идентификатора
Селектор класса
Несколько классов

Одним из основных преимуществ CSS является его способность применять набор стилей ко всем элементам одного типа. Например, если нам нужно сделать отступ у первой строки для всех абзацев или изменить цвет всех заголовков первого уровня, то можно использовать селектор элемента:

/*Задаём отступ первой строки для всех абзацев*/
p { text-indent: 25px; }

/*Изменяем цвет всех заголовков первого уровня на зелёный*/
h1 { color: green; }

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

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

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

Селектор идентификатора

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

Селектор идентификатора позволяет применить CSS-стили к HTML-элементу, у которого значение глобального атрибута id совпадает с именем селектора.

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

Селектор идентификатора может иметь произвольное имя, перед которым в CSS-коде ставится символ решётки (#). Решётка позволяет идентифицировать селектор как идентификатор, отличая его от других селекторов. Если решётка пропущена, селектор будет идентифицирован как селектор элемента и, при отсутствии элемента с таким именем, стиль применён не будет.

#catName { 
  background-color: gray;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;  
}

<p>Мою кошку зовут <span id="catName">Мурка</span>, она много спит.</p>

Результат

Мою кошку зовут Мурка, она много спит.

Определённое значение атрибута id должно быть использовано на странице только один раз с тем элементом, для которого оно предназначалось. Если вам нужно применить стиль более чем к одному элементу, следует использовать селектор класса.

Правила для имён идентификаторов:

в имени идентификатора разрешается использовать только буквы, числа, дефис и знак подчёркивания;
имя идентификатора всегда должно начинаться с буквы;
имена идентификаторов чувствительны к регистру символов, например: #Menu и #menu будут рассматриваться в CSS, как два разных идентификатора.

Селектор класса

Селектор класса позволяет применить CSS-стили к одному или нескольким HTML-элементам, у которых значение глобального атрибута class совпадает с именем селектора.

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

Селектор класса может иметь произвольное имя, перед которым в CSS-коде ставится точка. Точка позволяет обращаться к селектору как классу, отличая его от других селекторов. Если точка пропущена, селектор будет идентифицирован как селектор типа и, при отсутствии элемента с таким именем, стиль не будет применён.

.myClass { font-weight: bold; }

<p>Обычный текст, <span class="myClass">жирный текст</span>, обычный текст.</p>

Результат

Обычный текст, жирный текст, обычный текст.

Правила для имён классов:

в имени класса разрешается использовать только буквы, числа, дефис и знак подчёркивания;
имя класса всегда должно начинаться с буквы;
имена классов чувствительны к регистру, например .Menu и .menu будут рассматриваться в CSS, как два разных класса.

Если атрибут class, с одним и тем же значением, добавлен к нескольким разным элементам, а вам нужно чтобы стиль применялся только к определённым элементам, то в селекторе перед классом нужно добавить селектор элемента, к которому должен применяться стиль:

span.color { color: red; }

<h2 class="color">Стиль не будет применён.</h2>
<p class="color">Стиль не будет применён.</p>
<p>В этом абзаце <span class="color">есть кусок текста</span> красного цвета!</p>

Результат

Стиль не будет применён.

В этом абзаце есть кусок текста красного цвета!

Несколько классов

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

<p class="myClass1 myClass2 myClass3">текст</p>
<!-- или -->
<p class="myClass3 myClass1 myClass2">текст</p>

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

.myClass1 { background-color: silver; }
.myClass2 { background-color: yellow; }
.myClass3 { background-color: LightBlue; }

<p class="myClass3 myClass1 myClass2">текст</p>

Результат

текст

Объединяя селекторы классов вместе, можно выбирать только те элементы, у которых в значении атрибута class указаны все имена классов в любом порядке:

.weight { font-weight: bold; }
.style { font-style: italic; }
.weight.style { background: silver; }

<p class="weight">Первый абзац</p>
<p class="style">Второй абзац</p>
<p class="style weight">Третий абзац</p>

Результат

Первый абзац

Второй абзац

Третий абзац