/ ↲
    Расширенный поиск

    CSS

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

    Удобный способ выбрать из 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;
}
    Открыть демо в новой вкладке

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

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