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

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

Псевдоэлементы

Псевдоэлементы применяются к элементам, указывая на их части, например, первую букву или первое предложение. Они позволяют стилизовать эти части без использования дополнительных тегов, таких как <span>.

Пример на абзаце с классом example:

<p class="example">Это примерный абзац текста.</p>

Стили с помощью псевдоэлементов ::first-letter и ::first-line:

.example::first-letter {
  color: red;
}

.example::first-line {
  color: orange;
}

Результат: первая буква абзаца станет красной, а первое предложение — оранжевым. Использование ::first-letter и ::first-line избегает необходимости вкладывать <span> для стилизации отдельных частей текста, что упрощает код.

Стилизация ссылок

Рассмотрим стилизацию ссылок. Создадим ссылку, не ведущую никуда (используя #):

<a href="#">Ссылка</a>

Добавим стили с помощью класса:

.link {
  color: blue;
  text-decoration: underline; /* Подчеркивание по умолчанию */
}

Уберём подчеркивание, используя свойство text-decoration:

.link {
  color: blue;
  text-decoration: none;
}

Возможны другие значения text-decoration: overline, line-through, blink (мигающий текст, лучше избегать из-за раздражающего эффекта). text-decoration: none; убирает подчеркивание для всех элементов, если применить его к универсальному селектору *.

Псевдоклассы

Псевдоклассы изменяют стиль элемента в зависимости от его состояния или контекста. Рассмотрим псевдоклассы для ссылок:

  • :link: Стиль по умолчанию для всех ссылок. Обычно не указывается явно.
  • :hover: Стиль при наведении курсора мыши.
  • :active: Стиль при нажатии на ссылку.
  • :visited: Стиль для уже посещённых ссылок (работает не во всех браузерах).

Пример с различными стилями для :hover и :active:

<a href="#" class="link2">Ссылка 2</a>
.link2 {
  color: green;
}

.link2:hover {
  color: blue;
}

.link2:active {
  color: red;
}

.link2:visited {
  color: gray;
}

При наведении курсора цвет ссылки изменится на синий, при нажатии — на красный, а после посещения — на серый. Псевдоклассы :hover, :active и :visited могут применяться не только к ссылкам, но и к другим элементам. Например, можно использовать :hover для изменения фона элемента при наведении курсора.

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

Что будем искать? Например,программа