Псевдоклассы — краеугольный камень использования селекторов. Для начала определим, почему же такие селекторы имеют название псевдо. Псевдоклассами не выбирается элемент напрямую. Они указывают на какое-либо состояние элемента. Достаточно просто показать это на примере ссылок.
<a href="#">Обычная гиперссылка</a>
Что мы можем сказать об этом элементе? Это элемент HTML со стандартными стилями и возможностью переадресовать пользователя. Если попробовать перейти по ссылке, то случится целых 3 события!
- Наведение на ссылку.
- Момент клика по ссылке. Этот момент наступает при нажатии основной кнопки мыши, но до ее отпускания.
- Браузер автоматически помечает ссылку, по которой мы уже переходили.
Есть еще одно событие, которое обрабатывает ссылка — событие фокуса. Оно возникает при переходе на ссылку с помощью клавиатуры.
Добейтесь воспроизведения всех событий и посмотрите, как будет меняться взаимодействие:
- При наведении на ссылку изменится тип курсора мыши.
- При нажатии основной клавиши мыши ссылка поменяет свой цвет.
- При отпускании основной клавиши мыши ссылка еще раз поменяет цвет, указывая на то, что пользователь уже совершал переход по ней.
- Нажмите клавишу Tab. Так вы увидите состояние фокуса, при котором вокруг ссылки появятся границы.
Можем ли мы, как разработчики, контролировать это поведение? Конечно да! В этом и кроется сила псевдоклассов — они позволяют задавать стили не напрямую для элементов, а для их состояний или для некоторых других условий.
Псевдоклассы имеют специальный синтаксис, который позволяет легко отличить их от других селекторов. Записываются они так: селектор:псевдокласс. Разберемся на примере.
Для стилизации элемента при наведении используется псевдокласс :hover. Стили, указанные в таком селекторе, будут применяться только при наведении на элемент и удаляться при снятии состояния. Попробуем стилизовать стили ссылки при наведении.
a:hover {
color: #2196f3;
text-decoration: none;
}
Самое невероятное, что можно комбинировать уже изученные селекторы. Представьте, что при наведении на один элемент будет меняться совершенно другой! Помните про смежные и родственные селекторы? Никто не запрещает комбинировать их и получать интересные стили.
Для других состояний так же существуют свои псевдоклассы.
:active— Стиль при нажатии на ссылку, но до перехода по ней.:visited— Стиль уже посещенной ссылки.:focus— Стиль при событии фокуса на элементе.
Обратите внимание, что все эти псевдоклассы могут работать не только для ссылок. Не бойтесь экспериментировать :)
Структурные псевдоклассы
К структурным псевдоклассам можно отнести те, которые добавляют стили к элементу в зависимости от его месторасположения внутри HTML. Это мощное средство, позволяющее добиться сложных стилей без использования большого количества классов.
Основным структурным псевдоклассом является :nth-child(условие). Вы можете увидеть, что это целая функция, которая принимает условие. По этому условию будет выбран элемент или элементы. Разберемся, какие значения она может принимать и какие элементы будут выбраны.
Самое простое — указать конкретный элемент, который нужен. Для этого достаточно указать порядковый номер элемента. Обратите внимание, что элементы должны быть потомками одного родителя и выбираться по одному селектору.
<section>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</section>
section p:nth-child(2) {
color: #2196f3;
}
Помимо прямого выбора элемента, можно передать специальные последовательности, которые смогут выбрать не один, а сразу несколько элементов.
:nth-child(2n)— выбрать каждый второй элемент. 2, 4, 6, 8... Число может стоять любое. Если поставить3n, то будет выбран каждый третий элемент и так далее. Это касается всех последовательностей.:nth-child(2n + 1)— выбрать каждый второй элемент, начиная с первого. 1, 3, 5, 7, 9...:nth-child(even)— выбрать все четные элементы. То же самое, что и:nth-child(2n).:nth-child(odd)— выбрать все нечетные элементы. То же самое, что и:nth-child(2n + 1).
Похожим псевдоклассом является :nth-of-type(условие). Попробуйте в примере выше заменить nth-child и результат останется тем же. Но зачем нужен еще один псевдокласс с тем же функционалом?
Приглядитесь внимательно. В случае с nth-child отсчет элементов начался с четного элемента. Но ведь 1 — это нечетное число. Вы будете правы с точки зрения математики, но не логики работы nth-child. Он выбрал все элементы с учетом того, на какой позиции они находятся относительно других элементов в блоке. По этой причине элементы 4 и 5 являются нечетными, хотя и идут подряд. Логика работы следующая:
- Первый элемент внутри блока — h2. Он стоит на нечетной позиции относительно всех элементов внутри родителя.
- Элементы 1 и 3 являются четными, так как внутри родителя являются вторым и четвертым элементом соответственно.
- Элементы 2 и 4 являются нечетными, так как внутри родителя являются третьим и пятым элементом.
- Заголовок «Вторая часть цифр» — четный элемент внутри родителя.
- Элемент 5 теперь тоже нечетный, так как идет после четного заголовка.
Псевдокласс nth-of-type распознает не только позицию элемента, но и его тип. В нашем случае для этого селектора не существует заголовков. Выборка идет только по элементам <div> вне зависимости от того, какие еще элементы находятся внутри родителя.
Не всегда есть потребность использовать такие сложные псевдоклассы. Для некоторых стандартных ситуаций существуют специальные псевдоклассы:
:first-child— выбирает первый элемент внутри родителя.:last-child— выбирает последний элемент внутри родителя.:first-of-type— выбирает первый элемент внутри родителя, учитывая тип элемента.:last-of-type— выбирает последний элемент внутри родителя, учитывая тип элемента.:only-child— выбирает элемент, если он единственный внутри родителя.
Самостоятельная работа
Возьмите любой из предыдущих уроков и, используя псевдоклассы, дополните стили. Попробуйте использовать разные выражения внутри структурных псевдоклассов.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
