Классы CSS

Как было сказано в статье по основам CSS, можно использовать теги в роли селекторов. К примеру, такой CSS код говорит о том, что весь текст внутри тега <b> будет красного цвета:

b {
   color: red;
}

В таком случае будут окрашены все теги <b> вне зависимости от их количества на странице. Если нужно задать свойство только для ограниченного количества элементов, то лучше использовать класс в качестве селектора.

Класс указывается для каждого тега самостоятельно так же, как и атрибуты. К примеру, придумаем класс под названием «test»:

<b class="test">

В CSS коде селектор по классу будет иметь точку перед названием класса «.test»

.test {
   color: red;
}

У каждого тега может быть несколько классов. Можно использовать их в качестве CSS селекторов как по отдельности, так и одновременно. Рассмотрим пример

<b class="test1">Тише, мыши.</b>
<b class="test1 test2">Кот на крыше.</b>

Применим к этим тегам следующие свойства:

.test1 {
   color: red;
}
.test2 {
   color: green;
}

Результат будет таким:

Тише, мыши. Кот на крыше.

На втором предложении значение свойства color от класса test1 будет перезаписано из-за класса test2.

Теперь рассмотрим способы использования нескольких классов одновременно в качестве селектора. Если использовать предыдущий пример, то для прямого обращение ко второму тегу необходимо использовать селектор «.test1.test2»

.test1.test2 {
   color: green;
}

Обратите внимание, что между названиями классов в селекторе нет пробела. И в селекторе может быть любое количество классов. К примеру: «.test1.test2.test3.test4» будет соответствовать тэгу с таким набором классов:

<b class="test1 test2 test3 test4">

Пробел между названиями классов в селекторе ставится, только если надо обратиться к вложенному элементу. К примеру, если есть html код:

<b class="test1">
   Тише, мыши.
   <u class="test2">Кот на крыше.</u>
</b>

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

.test1 .test2 {
   color: green;
}

Таким образом можно обращаться к элементам любого уровня вложенности и с любым количеством тегов. К примеру, «.test1 .test2 .test3.test4 .test5» будет соответствовать вложенному тэгу с таким набором классов:

<b class="test1">
   <b class="test2">
      <b class="test3 test4">
         <b class="test5">Сыр</b>
      </b>
   </b>
</b>

В таком случае CSS селектор будет выглядеть так:

.test1 .test2 .test3.test4 .test5 {
   color: green;
}

А результат на странице браузера будет выглядеть так:

Сыр