Гибкость выбора элементов из DOM структуры документа при помощи селектора класса принесла ему лавры самого часто используемого селектора в CSS.

Он позволяет при необходимости присвоить оформление не просто всем одинаковым тегам, а сделать из них необходимую нам выборку, в зависимости от того, какой мы присвоили им атрибут class.

О тонкостях использования данного инструмента и пойдет речь в данной статье.

Описание селектора класса в CSS

Основная цель — отбор всех тегов из структуры документа, которым задан определенный класс.

Синтаксис – точка, после которой следует название класса (регистр букв в названии имеет значение: .active, .Active, .acTive — разные классы). Название класса не может начинаться с цифры.

Примеры испльзования:

Имеем фрагмент html кода, который и будем оформлять:

<div class="mainContent">
   <p class="superText">Текст, который мы хотим выделить</p>
   <p>Просто какой-то текст</p>
   <p class="useful">Просто какой-то текст</p>
   <ul>
      <li class="useful">Информация</li>
      <li>Информация</li>
   </ul>
</div>
<div class="rightSidebar">
   <ul>
      <li class="useful superText">Информация</li>
      <li>Информация</li>
   </ul>
</div>

Стандартным приемом из практики является применение в верстке тегов div для создания общей структуры документа. Формирование структуры происходит через присвоение необходимым элементам необходимого именно им оформления.

Давайте расположим контент из примера выше в 2 столбца, причем первый из них будет шириной 740 пикслей, а второй 240:

.mainContent, .rightSidebar {
   display: inline-block;
   vertical-align: top;
 }
 .mainContent {
   width: 740px;
 }
 .rightSidebar {
   width: 240px;
 }

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

Теперь сделаем больше и жирным текст с классом superText, а полезный текст (useful) выделим красным:

.useful {
   color: red;
}
.superText {
   font-size: 130%;
   font-weight: bold;
}

На этом этапе мы можем заметить, что к одному элементу можно присваивать оформление от нескольких классов, прописав их в теге через пробел ("useful superText" — будет большего размера, жирным, красным).

Также не имеет значения к какому тегу мы присваиваем класс. Оформление от . useful одинаково применится ко всем 3-м случаям его использования.

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

li.useful {
   color: green;
}
.useful.superText {
   font-size: 150%;
}

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

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

Распространенные ошибки новичков

• Не абсолютная идентичность css селектора класса и html атрибута class. class="Left" и class="left" это разные классы.
• Нечитабельные названия классов или же использование названий, которые не несут на себе логической нагрузки. “.lll” — пользуясь такими обозначениями нет ничего проще, чем заблудиться в коде. “.header .left” –нормально. “.header .leftColumn” — отлично.
• Совмещение селекторов классов и id по типу  “#superElement.super” или же “.super #SuperElement” — данная конструкция не имеет смысла и только загромождает цсс код, делая его интерпретацию сложнее. Id уже подразумевает, что элемент уникален и не нуждается в уточнении со стороны других селекторов.
• Не нужно злоупотреблять множественными селекторами классов, чтобы не запутаться в своем же коде. Но стоит отметить, что использование его, к примеру, для выделения активных в данный момент вкладок списка классом .active, достаточно оправдано. Это позволит не писать один код много раз. В случае же селектора из разряда “sidebar main newsPanel wide” стоит создать новый класс с оформлением конкретно для данного случая и не мучаться.