Классы 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;
}
А результат на странице браузера будет выглядеть так:
Сыр

MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: