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

Селектор класу CSS дає збіг з елементами на основі їхнього атрибута class.

/* Усі елементи з class="spacious" */
.spacious {
  margin: 2em;
}

/* Усі елементи <li> з class="spacious" */
li.spacious {
  margin: 2em;
}

/* Усі елементи <li>, чий список класів включає як "spacious", так і "elegant" */
/* Наприклад, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

Синтаксис

.class_name { style properties }

Зверніть увагу на те, що це рівносильно наступному селектору атрибута:

[class~=class_name] { style properties }

Приклади

CSS

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

HTML

<p class="red">Цей абзац має червоний текст.</p>
<p class="red yellow-bg">Цей абзац має червоний текст і жовтий фон.</p>
<p class="red fancy">Цей абзац має червоний текст і "вишукане" оформлення.</p>
<p>Це лишень звичайний абзац.</p>

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Селектори CSS
• Вивчаймо CSS – Селектори