skip to main content

.class

css

Кратко 🔗

Селектор по классу находит элемент на странице по значению атрибута class.

Пример 🔗

<h2 class="article-title">Нобелевская премия по физике 2020 года</h2>
<h3 class="article-title">Шнобелевская премия 2020</h3>

Селектор ниже найдёт все элементы, значение атрибута class которых равно article-title.

.article-title {
margin-bottom: 1.6em;
}

Как пишется 🔗

Стиль применится ко всем элементам с атрибутом class="article-title".

.article-title {
margin-bottom: 1.6em;
}

Стиль применится ко всем заголовкам <h2> с атрибутом class="article-title".

h2.article-title {
margin-bottom: 1.6em;
}

Стиль применится ко всем заголовкам <h2>, атрибут class которых содержит несколько значений, разделенных пробелом, и среди этих значений есть "article-title" и "title-primary".

h2.article-title.title-primary {
text-decoration: underline;
}

Подсказки 🔗

Селектор по классу довольно прост в понимании, а особенности атрибута class дают большую гибкость в стилизации. Мы всегда можем придумать уникальное значение для атрибута class и по этому значению точечно применить нужные стили. Но также мы можем задать элементу любое количество классов, просто перечислив их через пробел. Благодаря этому мы можем переиспользовать некоторые стили на разных элементах.

<label for="input" class="form-label text-invalid">Ваше имя:</label>
<input id="input" type="text" placeholder="Только кириллица" />

<p class="text-invalid warning">Вы не заполнили все поля</p>

<h3 class="warning">Обратите внимание</h3>
.form-label {
display: block;
font-size: 1em;
color: #333333;
}

/* Если элементу добавить класс "text-invalid", то текст будет красным */
.text-invalid {
color: red;
}

/* Если элементу добавить класс "warning", то перед текстом будет иконка с жёлтым треугольником */
.warning::before {
content: "⚠️ ";
}

See the Pen Class selector by Denis Ezhkov (@ezhkov) on CodePen.

В работе 🔗

Селектор по классу является основным селектором для стилизации любой веб-страницы. Благодаря тому, что одному элементу можно задать несколько классов, а нескольким элементам — один и тот же класс, мы получаем супер-гибкий способ стилизации страниц любой сложности.

Например, мы можем уточнить один селектор по классу другим:

<form action="">
<label class="form-label invalid" for="input">Ваш email</label>
<input class="form-input invalid" type="email" />
</form>
.form-label.invalid {
color: red;
}

.form-input.invalid {
border-color: red;
background-color: #ff000022;
}

See the Pen Class selector 2 by Denis Ezhkov (@ezhkov) on CodePen.

А можем добавить класс родительскому элементу, чуть изменить селекторы и получить тот же результат:

<form action="" class="invalid">
<label class="form-label" for="input">Ваш email</label>
<input class="form-input" type="email" />
</form>
.invalid .form-label {
color: red;
}

.invalid .form-input {
border-color: red;
background-color: #ff000022;
}

See the Pen Class selector 3 by Denis Ezhkov (@ezhkov) on CodePen.

Самое сложное в вёрстке — выбрать способ решения задачи, потому что любая задача решается двумя и более способами :)

Автор: Денис,