логотип PurpleSchool
логотип PurpleSchool

Селектор по классу в CSS; Полное руководство с примерами

Автор

Дмитрий Нечаев

Селекторы по классу в CSS позволяют разработчикам выбрать элементы в HTML-документе с определённым классом и применить к ним стили. Это мощный и гибкий инструмент, который помогает точно управлять внешним видом веб-страницы. В этой статье мы подробно рассмотрим, как использовать селекторы по классу, их преимущества и приведем примеры для различных ситуаций.

Что такое селектор по классу?

Селектор по классу выбирает все элементы, у которых установлен определённый класс. Класс определяется в HTML с помощью атрибута class. В CSS селекторы по классу обозначаются точкой (.) перед именем класса.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .highlight {
      background-color: yellow; /* Устанавливает жёлтый фон для элементов с классом highlight */
    }
  </style>
  <title>Селектор по классу</title>
</head>
<body>
  <p class="highlight">Этот абзац будет выделен жёлтым фоном.</p>
  <p>Этот абзац останется без изменений.</p>
</body>
</html>

В этом примере все элементы с классом highlight будут иметь жёлтый фон.

Преимущества использования селекторов по классу

  • Гибкость: Можно применять один и тот же класс к различным элементам, создавая универсальные стили.
  • Лёгкость управления: Стили можно изменять в одном месте в CSS, что автоматически применится ко всем элементам с этим классом.
  • Многократное использование: Один класс можно использовать многократно в разных частях документа.

Селекторы по классу и их применение

Применение к разным элементам

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .highlight {
      color: red; /* Устанавливает красный цвет текста для элементов с классом highlight */
    }
  </style>
  <title>Применение к разным элементам</title>
</head>
<body>
  <h1 class="highlight">Заголовок</h1>
  <p class="highlight">Абзац текста</p>
  <span class="highlight">Текст в спане</span>
</body>
</html>

Комбинирование с другими селекторами

Селекторы по классу можно комбинировать с другими селекторами для более точного управления стилями. Например, можно сочетать селектор по классу с селектором по тегу.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p.highlight {
      font-weight: bold; /* Устанавливает жирный шрифт для абзацев с классом highlight */
    }

    div.highlight {
      border: 1px solid black; /* Устанавливает границу для дивов с классом highlight */
    }
  </style>
  <title>Комбинирование селекторов</title>
</head>
<body>
  <p class="highlight">Абзац текста</p>
  <div class="highlight">Контейнер</div>
</body>
</html>

Множественные классы

Элемент может иметь несколько классов, что позволяет комбинировать стили из разных классов.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .text-large {
      font-size: 24px; /* Устанавливает крупный шрифт */
    }

    .text-blue {
      color: blue; /* Устанавливает синий цвет текста */
    }
  </style>
  <title>Множественные классы</title>
</head>
<body>
  <p class="text-large text-blue">Этот текст будет крупным и синим.</p>
</body>
</html>

Вложенные элементы

Селекторы по классу можно использовать для стилизации вложенных элементов.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      padding: 20px;
      background-color: lightgrey;
    }

    .container .highlight {
      color: red; /* Стилизация элементов с классом highlight внутри контейнера */
    }
  </style>
  <title>Вложенные элементы</title>
</head>
<body>
  <div class="container">
    <p class="highlight">Этот текст будет красным.</p>
    <p>Этот текст останется без изменений.</p>
  </div>
</body>
</html>

Псевдоклассы и псевдоэлементы

Селекторы по классу можно комбинировать с псевдоклассами и псевдоэлементами для создания сложных стилей.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .button {
      padding: 10px 20px;
      background-color: blue;
      color: white;
      text-decoration: none;
      display: inline-block;
    }

    .button:hover {
      background-color: darkblue; /* Изменение цвета фона при наведении */
    }

    .button::after {
      content: ' →'; /* Добавление стрелки после текста кнопки */
    }
  </style>
  <title>Псевдоклассы и псевдоэлементы</title>
</head>
<body>
  <a href="#" class="button">Кнопка</a>
</body>
</html>

Заключение

Селекторы по классу в CSS являются удобным и мощным инструментом для стилизации элементов HTML. Они позволяют легко управлять внешним видом элементов, обеспечивая гибкость и многократное использование стилей. Понимание того, как использовать селекторы по классу, комбинировать их с другими селекторами и применять их к различным элементам, помогает разработчикам создавать хорошо структурированные и поддерживаемые стили для веб-страниц. Экспериментируйте с различными комбинациями и находите оптимальные решения для ваших проектов.

Стрелочка влевоКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерамиСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний