CSS Урок 4: Псевдоклассы и псевдоэлементы для новичков

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

Псевдоклассы изменяют CSS-свойства в зависимости от состояния элемента. Пример со ссылкой:

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

Базовые стили:

.mainlink {
  color: red;
  text-decoration: none;
}

Ссылка красная, без подчеркивания.

Стили для состояния :hover (наведение курсора):

.mainlink:hover {
  color: blue;
  text-decoration: overline; /* Подчеркивание сверху */
  text-decoration-color: red; /* Цвет подчеркивания */
}

При наведении – синяя, красное подчеркивание сверху. overline не всегда поддерживается; для нижнего подчеркивания лучше использовать underline.

Для демонстрации универсальности, применим стили к абзацу:

<p class="mainlink">Lorem ipsum dolor sit amet.</p>

Стиль применяется аналогично.

Изменение курсора с помощью свойства cursor:

.mainlink {
  cursor: pointer;
}

Курсор станет указывающим. cursor поддерживает множество значений, включая изображения.

Активное состояние, посещенные ссылки и фокус

Псевдокласс :active (активное состояние при нажатии):

.mainlink:active {
  text-decoration: line-through;
}

При нажатии текст зачеркивается.

Псевдокласс :visited для посещенных ссылок:

.mainlink:visited {
  color: gray;
}

После перехода текст ссылки станет серым. text-decoration: line-through может не работать внутри :visited.

Псевдокласс :focus срабатывает при фокусировке (например, на текстовом поле):

<input type="text" placeholder="Введите текст">

input {
  color: blue;
}
input:focus {
  color: red;
}

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

Используются также :disabled и :required для отключенных и обязательных полей.

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

Псевдокласс :empty для выбора пустых элементов:

<p class="text"></p>
<p class="text">Текст</p>

p.text:empty {
  /* Стиль для пустого абзаца */
}
p.text:not(:empty) {
  /* Стиль для непустого абзаца */
}

Псевдоэлементы: работа с частями текста

Псевдоэлементы позволяют стилизовать части текста. ::before и ::after:

<div id="sample">Сам текст</div>

#sample::before {
  content: "123 ";
  color: red;
  text-decoration: line-through;
}
#sample::after {
  content: " 456";
  color: red;
  text-decoration: line-through;
}

::before добавляет «123 » перед содержимым, ::after – » 456″ после. content может содержать текст и значения атрибутов.

::first-letter и ::first-line для стилизации первого символа и строки соответственно.

p.mainlink::first-letter {
  color: green;
}

Псевдоклассы :first-of-type и :last-of-type для стилизации первого и последнего элемента определенного типа.

Псевдоклассы и псевдоэлементы – мощные инструменты CSS для создания интерактивных и стильных веб-страниц. Практикуйтесь и экспериментируйте.