Class Selector (CSS селектор)

Синтаксис

  .className {
 блок декларации
 }

Описание

Выбор элементов на основе их имен классов является очень распространенной техникой в ​​CSS. Синтаксис селектора атрибута [class~="warning"]

Вот простой пример, который выбирает все элементы с атрибутом classwarning

 .warning {
  ⋮ declarations
}

Этот пример также иллюстрирует использование подразумеваемого универсального селектора — он эквивалентен *.warning. Обратите внимание, что пробельные символы не могут появляться после точки, или между селектором типа элемента или явным универсальным селектором, и точкой. Например, следующий селектор сопоставит все элементы pclasswarning

 p.warning {
  ⋮ declarations
}

Простой селектор может содержать более одного селектора атрибута и / или селектора класса; в таких случаях шаблон селектора соответствует элементам, атрибуты которых содержат все указанные компоненты. Вот пример:

 div.foo.bar {
  ⋮ declarations
}
div.foo.bar[title^="Help"] {
  ⋮ declarations
}

Первый селектор примера выше соответствует элементам divclass"foo""bar" Второй пример селектора соответствует элементам divclass"foo""bar""Help" Для дальнейшего уточнения HTML, который будет соответствовать вышеупомянутым селекторам, может быть следующим:

 <div class="foo bar">Matches first example</div>
<div class="foo bar" title="Help">Matches second example</div>

 p.intro {
  ⋮ declarations
}