Классы 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, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: