CSS3

Изучение CSS/CSS3 от нуля до гуру!

15 уроков 45 заданий Справочник Компилятор

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

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


HTML5CSS3

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

Видео урок:

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

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

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

Загрузка...

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

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

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

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


HTML5CSS3

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