логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Псевдоклассы в CSS. Полное руководство с примерами

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

05 декабря 2024 г.
Автор

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

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

Что такое псевдокласс?

Псевдокласс — это ключевое слово, добавляемое к селектору, которое указывает на специальное состояние выбранных элементов. Псевдоклассы записываются с использованием двоеточия (:) перед именем псевдокласса.

Пример базового псевдокласса:

selector:pseudo-class {
  /* Стили */
}

Пример использования псевдокласса:

a:hover {
  color: red;
}

В этом примере стиль применяется к ссылкам при наведении курсора мыши.

Основные псевдоклассы

Псевдоклассы взаимодействия

:hover

Применяется, когда пользователь наводит курсор на элемент.

Пример:

button:hover {
  background-color: blue;
  color: white;
}

:active

Применяется к активному элементу, например, когда пользователь нажимает на кнопку.

Пример:

button:active {
  background-color: darkblue;
}

:focus

Применяется к элементу, когда он получает фокус, например, при нажатии на поле ввода.

Пример:

input:focus {
  border-color: green;
}

Псевдоклассы состояния

:checked

Применяется к элементам формы (checkbox или radio), которые находятся в выбранном состоянии.

Пример:

input[type="checkbox"]:checked {
  background-color: green;
}

:disabled

Применяется к элементам формы, которые отключены.

Пример:

input:disabled {
  background-color: #ccc;
}

:enabled

Применяется к элементам формы, которые включены.

Пример:

input:enabled {
  border: 1px solid black;
}

Псевдоклассы размещения

:first-child

Применяется к первому дочернему элементу своего родителя.

Пример:

p:first-child {
  font-weight: bold;
}

:last-child

Применяется к последнему дочернему элементу своего родителя.

Пример:

p:last-child {
  color: red;
}

:nth-child()

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

Пример:

li:nth-child(odd) {
  background-color: #f0f0f0;
}

li:nth-child(even) {
  background-color: #ddd;
}

Псевдоклассы формы

:valid

Применяется к элементам формы, значение которых соответствует правилам валидации.

Пример:

input:valid {
  border-color: green;
}

:invalid

Применяется к элементам формы, значение которых не соответствует правилам валидации.

Пример:

input:invalid {
  border-color: red;
}

Псевдоклассы структуры

:empty

Применяется к элементам, не имеющим дочерних элементов.

Пример:

div:empty {
  display: none;
}

:not()

Применяется к элементам, которые не соответствуют указанному селектору.

Пример:

button:not(.primary) {
  background-color: grey;
}

Примеры использования псевдоклассов в реальных проектах

Стилизация кнопок

Использование псевдоклассов для создания интерактивных кнопок:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .btn {
      padding: 10px 20px;
      background-color: blue;
      color: white;
      border: none;
      cursor: pointer;
    }

    .btn:hover {
      background-color: darkblue;
    }

    .btn:active {
      background-color: navy;
    }
  </style>
  <title>Стилизация кнопок</title>
</head>
<body>
  <button class="btn">Кнопка</button>
</body>
</html>

Стилизация полей формы

Использование псевдоклассов для стилизации полей ввода в зависимости от их состояния:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input {
      padding: 10px;
      border: 1px solid #ccc;
    }

    input:focus {
      border-color: blue;
    }

    input:valid {
      border-color: green;
    }

    input:invalid {
      border-color: red;
    }
  </style>
  <title>Стилизация полей формы</title>
</head>
<body>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </form>
</body>
</html>

Стилизация списка

Использование псевдоклассов для чередования цветов строк списка:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    li:nth-child(odd) {
      background-color: #f0f0f0;
    }

    li:nth-child(even) {
      background-color: #ddd;
    }
  </style>
  <title>Стилизация списка</title>
</head>
<body>
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
    <li>Элемент 4</li>
    <li>Элемент 5</li>
  </ul>
</body>
</html>

Заключение

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

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile