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

Селектор класса CSS сопоставляет элементы на основе содержимого их атрибута class.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

Синтаксис

.class_name { style properties }

Обратите внимание, что это эквивалентно следующему селектору атрибута:

[class~=class_name] { style properties }

Значение class_name должно быть корректным идентификатором CSS. HTML class атрибуты, которые не являются корректными идентификаторами CSS, должны быть экранированы перед использованием в селекторах классов.

Примеры

Действительные селекторы классов

HTML

<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
  This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>

<!-- The next two paragraphs have class attributes
that contain characters which must be escaped in CSS -->

<p class="item?one">This paragraph has a pink background.</p>
<p class="123item">This paragraph has a yellow background.</p>

CSS

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

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

/* In the next two rules, the class attributes must be escaped */

.item\?one {
  background-color: pink;
}

.\00003123item {
  background-color: yellow;
}

Результат

Недействительные селекторы классов

Селекторы классов в следующих правилах не являются корректными идентификаторами CSS и будут проигнорированы.

.item?one {
  background-color: green;
}

.123item {
  background-color: green;
}

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

Спецификация
Уровень 4 селекторов # class-html

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Class_selectors`	1	12	1	3.5	1	18	4	10.1	1	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors