Изучение CSS для новичков / Урок #4 – Псевдоклассы и псевдоэлементы

YOUTUBE · 16.11.2025 07:19

Ключевые темы и таймкоды

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

0:00

Псевдоклассы и псевдоэлементы в CSS позволяют управлять свойствами для различных состояний объекта.
Пример с ссылкой: создание ссылки с классом "main-link" и изменение её цвета на красный.
Изучение свойства text-decoration для управления подчеркиванием текста.

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

1:57

Использование псевдокласса "hover" для изменения цвета и подчеркивания текста при наведении.
Пример: изменение цвета текста на синий и добавление подчеркивания "overline".
Проблемы с поддержкой подчеркивания "overline" в браузерах и предпочтение "underline".

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

4:41

Псевдоклассы можно применять не только к ссылкам, но и к другим элементам, таким как абзацы и div.
Пример: применение тех же стилей к абзацу с классом "main-link".
Изучение свойства cursor для изменения формата курсора при наведении.

Псевдокласс "active"

7:34

Псевдокласс "active" срабатывает при нажатии на объект.
Пример: установка текста на "line-through" при нажатии на ссылку.
Возможность добавления псевдоклассов к любым селекторам, включая теги, идентификаторы и вложенные селекторы.

Псевдокласс "visited"

9:29

Применяется к ссылкам, по которым уже переходили.
Устанавливает стили, такие как цвет текста, при наведении на ссылку.
Стили сохраняются даже при обновлении страницы.

Ограничения псевдокласса "visited"

10:25

Текст "text-decoration" не работает внутри "visited".
Всегда срабатывает свойство "color".
Можно использовать свойство "background-color" для заднего фона.

Псевдокласс "focus"

11:24

Применяется к текстовым полям при наведении курсора.
Устанавливает цвет текста на красный при наведении.
Цвет текста возвращается к исходному при выходе из поля.

Псевдоклассы "disabled" и "required"

13:16

Применяются к отключенным текстовым полям.
Используются для выбора полей с пометкой "required".
Можно выбрать любые объекты с определенной меткой.

Псевдоклассы "empty" и "not-empty"

14:13

Применяются к пустым и непустым абзацам.
Используются для добавления стилей к определенным абзацам.
Пустые абзацы не затрагиваются стилями.

Псевдоэлементы "before" и "after"

17:06

Работают с невидимой частью текста за объектом.
Используются для добавления текста перед или после объекта.
Пример: добавление текста "один, два, три" после основного текста.

Псевдоэлемент автора

19:00

Можно добавить стили к тексту после объекта.
Пример: добавление текста "сам" после абзаца с классом "текст".
Псевдоэлемент автора позволяет выводить текст за HTML-тегом.

Псевдоэлемент фор

21:49

Псевдоэлемент фор позволяет работать с текстом перед HTML-тегом.
Пример: вывод текста "один, два, три" перед блоком.
Псевдоэлементы можно использовать для работы с различными частями HTML-элементов.

Псевдоэлементы ферст леттер и ферст лайн

22:48

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

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

23:42

Псевдоэлементы ферст оф тип и ласт оф тип позволяют стилизовать первый и последний теги HTML-документа соответственно.
Пример: добавление стиля "лайн с ру" только к первому абзацу с использованием ферст оф тип.
Псевдоэлементы помогают работать с различными частями HTML-документов.

Заключение

26:36

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