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

Удобный способ выбрать из HTML-разметки элементы только с нужным классом. И применить к ним стили.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

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

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

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

Как пишется

Скопировано

Самое важное — поставить точку перед значением атрибута class того элемента, к которому вы хотите применить стили. Селектор без точки в начале — селектор по тегу.

Вот так сработает:

        
          
          .class-value {  color: red;}
          .class-value {
  color: red;
}

А вот так не сработает:

        
          
          class-value {  color: red;}
          class-value {
  color: red;
}

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

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

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

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

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

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

Подсказки

Скопировано

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

        
          
          <blockquote class="color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит...</blockquote><blockquote class="author" cite="Эрих Мария Ремарк">Зима пробуждает аппетит...</blockquote><blockquote class="author color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит...</blockquote>
          <blockquote class="color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит...</blockquote>
<blockquote class="author" cite="Эрих Мария Ремарк">Зима пробуждает аппетит...</blockquote>
<blockquote class="author color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит...</blockquote>

        
          
          blockquote {  position: relative;  background-color: white;  color: #123E66;}
          blockquote {
  position: relative;
  background-color: white;
  color: #123E66;
}

Если цитате добавить класс .color, то фоновый цвет сменится на голубой:

        
          
          .color {  background-color: blue;  color: black;}
          .color {
  background-color: blue;
  color: black;
}

Если элементу добавить класс .author, то перед текстом цитаты будет декоративная кавычка, а после — имя автора:

        
          
          .author::before {  content: "“";  position: absolute;}.author::after {  content: attr(cite);  display: block;  font-style: italic;}
          .author::before {
  content: "“";
  position: absolute;
}

.author::after {
  content: attr(cite);
  display: block;
  font-style: italic;
}

Открыть демо в новой вкладке

На практике

Скопировано

Денис Ежков советует

Скопировано

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

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

        
          
          <form>  <label class="form-label invalid" for="input">Ваш email</label>  <input class="form-input invalid" type="email" id="input"></form>
          <form>
  <label class="form-label invalid" for="input">Ваш email</label>
  <input class="form-input invalid" type="email" id="input">
</form>

        
          
          .form-label.invalid {  color: pink;}.form-input.invalid {  border-color: pink;  background-color: #623D45;}
          .form-label.invalid {
  color: pink;
}

.form-input.invalid {
  border-color: pink;
  background-color: #623D45;
}

Открыть демо в новой вкладке

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

        
          
          <form class="invalid">  <label class="form-label" for="input">Ваш email</label>  <input class="form-input" type="email" id="input"></form>
          <form class="invalid">
  <label class="form-label" for="input">Ваш email</label>
  <input class="form-input" type="email" id="input">
</form>

        
          
          .invalid .form-label {  color: pink;}.invalid .form-input {  border-color: pink;  background-color: #623D45;}
          .invalid .form-label {
  color: pink;
}

.invalid .form-input {
  border-color: pink;
  background-color: #623D45;
}

Открыть демо в новой вкладке

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

Кратко

Пример

Как пишется

Подсказки

На практике

Денис Ежков советует

Читайте также

Атрибут class

Селектор по тегу

.querySelector()

Атрибут `class`

`.querySelector()`