Селектор класса

class selector

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Поддержка браузерами support selectors support selectors support selectors support selectors support selectors
Мобильные браузеры Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Поддержка браузерами support selectors support selectors support selectors support selectors support selectors
Селектор класса
element.class — этот селектор позволяет применить стили к элементу с именем класса
Применяется
К любым элементам
Можно применять
Для каждого элемента свои стили
Правила записи

element.class { свойство: значение; }

  • Перед именем класса необходимо ставить точку .
  • Пробел между точкой . и именем класса не допускается
  • Если перед именем класса ставится какой-либо элемент, то стили будут применены ко всем подобным элементам с таким же именем класса в документе
  • Если перед именем класса не указывается элемент, то стили будут применены ко всем элементам с таким же именем класса в документе
Примеры

<p>В этом абзаце стили будут <em class="style">применены</em> только к элементам <em class="style">em, которые имеют класс с именем style</em>, если же в абзаце содержатся <em>элементы em</em>, не имеющие атрибута class с именем style, то стили к ним применены не будут</p>

<p>Стили будут <span class="style">применены</span> ко всем элементам в документе которые имеют атрибут <strong class="style">class</strong> с именем <strong class="style">style</strong></p>

Поделиться