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

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

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

Видеоурок

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

Помимо элементов, что были рассмотрены в уроке также существуют другие. К примеру, псевдоэлемент :empty позволит добавить стили лишь к тем объектам, которые полностью пустые. Почитать детальнее обо всех псевдоклассах и элементах можно в нашем справочнике.

Онлайн редактор кода

Загрузка...

Задание к уроку

Эффект при наведении
Создайте объект div и добавьте стили, которые будут делать задний фон объекта синим при наведении мыши на него.
Посмотреть ответ
Решение задания CSS код:
div:hover {
   background-color: blue
}

Получить остальные домашние задания можно после подписки на проект

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Изучение HTML5 от нуля до гуру!
21 урок
Изучение препроцессора SASS / SCSS
7 уроков