CSS. Классы

Самый частый атрибут, который вы будете использовать для CSS стилизации - атрибут class.

Мы уже упоминали атрибуты, которые можно применить к любому тегу и class - один из таких атрибутов.

Атрибут class

Class также как и id своего рода идентификатор определенного элемента. Однако в отличии от id одно и то же имя класса можно применять к разным элементам страницы. Давайте будем рассматривать на примере. Рассмотрим следующий код:

<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
html

В этом примере все три элемента имеют один и тот же класс card. Это означает, что мы можем описать стили один раз и применить их ко всем этим элементам. Для написания селектора по классу используется символ точки (.) и имя класса без пробела между ними.

<style>
  .card {
    /* Добавляем границу */
    border: 1px solid #222;

    /* Задаём ширину карточки */
    width: 300px;
  }
</style>
<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
html

В результате все элементы с классом card будут выглядеть одинаково. Это и есть основная идея использования классов в CSS — переиспользование стилей.

Несколько классов одновременно

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

<style>
  .card {
    border: 1px solid #222;
    width: 300px;
  }
  .featured {
    /* Добавляем цвет фона */
    background-color: lightyellow;
  }
</style>
<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
<div class="card featured">Особая карточка</div>
html

Последняя карточка имеет сразу два класса одновременно и в итоге элемент получит стили из обоих классов. Это позволяет удобно комбинировать стили: один класс отвечает за базовый внешний вид, другой — за модификацию или состояние.

В следующем уроке рассмотрим более редкие, но полезные типы селекторов — группировку, вложенность и селекторы по атрибутам.