0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Псевдоклассы - краеугольный камень использования селекторов. Для начала определим, почему же такие селекторы имеют название<em>псевдо</em>. Псевдоклассами не выбирается элемент напрямую. Они указывают на какое-либо состояние элемента. Достаточно просто показать это на примере ссылок.</p>
1
<p>Псевдоклассы - краеугольный камень использования селекторов. Для начала определим, почему же такие селекторы имеют название<em>псевдо</em>. Псевдоклассами не выбирается элемент напрямую. Они указывают на какое-либо состояние элемента. Достаточно просто показать это на примере ссылок.</p>
2
<p>Что мы можем сказать об этом элементе? Это элемент HTML со стандартными стилями и возможностью переадресовать пользователя. Если попробовать кликнуть по ссылке, то случится целых 3 события!</p>
2
<p>Что мы можем сказать об этом элементе? Это элемент HTML со стандартными стилями и возможностью переадресовать пользователя. Если попробовать кликнуть по ссылке, то случится целых 3 события!</p>
3
<ol><li>Наведение на ссылку.</li>
3
<ol><li>Наведение на ссылку.</li>
4
<li>Момент клика по ссылке. Этот момент наступает при нажатии основной кнопки мыши, но до ее отпускания.</li>
4
<li>Момент клика по ссылке. Этот момент наступает при нажатии основной кнопки мыши, но до ее отпускания.</li>
5
<li>Браузер автоматически помечает ссылку, по которой мы уже переходили.</li>
5
<li>Браузер автоматически помечает ссылку, по которой мы уже переходили.</li>
6
</ol><p>Есть еще одно событие, которое обрабатывает ссылка - событие фокуса. Оно возникает при переходе на ссылку с помощью клавиатуры.</p>
6
</ol><p>Есть еще одно событие, которое обрабатывает ссылка - событие фокуса. Оно возникает при переходе на ссылку с помощью клавиатуры.</p>
7
<p><a>https://codepen.io/hexlet/pen/abmKEeo</a></p>
7
<p><a>https://codepen.io/hexlet/pen/abmKEeo</a></p>
8
<p>Добейтесь воспроизведения всех событий и посмотрите, как будет меняться взаимодействие:</p>
8
<p>Добейтесь воспроизведения всех событий и посмотрите, как будет меняться взаимодействие:</p>
9
<ol><li>При наведении на ссылку изменится тип курсора мыши.</li>
9
<ol><li>При наведении на ссылку изменится тип курсора мыши.</li>
10
<li>При нажатии основной клавиши мыши ссылка поменяет свой цвет.</li>
10
<li>При нажатии основной клавиши мыши ссылка поменяет свой цвет.</li>
11
<li>При отпускании основной клавиши мыши ссылка еще раз поменяет цвет, указывая на то, что пользователь уже совершал переход по ней.</li>
11
<li>При отпускании основной клавиши мыши ссылка еще раз поменяет цвет, указывая на то, что пользователь уже совершал переход по ней.</li>
12
<li>Нажмите клавишу Tab. Так вы увидите состояние фокуса, при котором вокруг ссылки появятся границы.</li>
12
<li>Нажмите клавишу Tab. Так вы увидите состояние фокуса, при котором вокруг ссылки появятся границы.</li>
13
</ol><p>Можем ли мы, как разработчики, контролировать это поведение? Конечно да! В этом и кроется сила псевдоклассов - они позволяют задавать стили не напрямую для элементов, а для их состояний или для некоторых других условий.</p>
13
</ol><p>Можем ли мы, как разработчики, контролировать это поведение? Конечно да! В этом и кроется сила псевдоклассов - они позволяют задавать стили не напрямую для элементов, а для их состояний или для некоторых других условий.</p>
14
<p>Псевдоклассы имеют специальный синтаксис, который позволяет легко отличить их от других селекторов. Записываются они так:<em>селектор:псевдокласс</em>. Разберемся на примере.</p>
14
<p>Псевдоклассы имеют специальный синтаксис, который позволяет легко отличить их от других селекторов. Записываются они так:<em>селектор:псевдокласс</em>. Разберемся на примере.</p>
15
<p>Для стилизации элемента при наведении используется псевдокласс :hover. Стили, указанные в таком селекторе, будут применяться только при наведении на элемент и удаляться при снятии состояния. Попробуем стилизовать стили ссылки при наведении.</p>
15
<p>Для стилизации элемента при наведении используется псевдокласс :hover. Стили, указанные в таком селекторе, будут применяться только при наведении на элемент и удаляться при снятии состояния. Попробуем стилизовать стили ссылки при наведении.</p>
16
<p><a>https://codepen.io/hexlet/pen/YzGvewN</a></p>
16
<p><a>https://codepen.io/hexlet/pen/YzGvewN</a></p>
17
<p>Самое невероятное, что можно комбинировать уже изученные селекторы. Представьте, что при наведении на один элемент будет меняться совершенно другой! Помните про смежные и родственные селекторы? Никто не запрещает комбинировать их и получать интересные стили.</p>
17
<p>Самое невероятное, что можно комбинировать уже изученные селекторы. Представьте, что при наведении на один элемент будет меняться совершенно другой! Помните про смежные и родственные селекторы? Никто не запрещает комбинировать их и получать интересные стили.</p>
18
<p><a>https://codepen.io/hexlet/pen/NWRzyrz</a></p>
18
<p><a>https://codepen.io/hexlet/pen/NWRzyrz</a></p>
19
<p>Для других состояний так же существуют свои псевдоклассы.</p>
19
<p>Для других состояний так же существуют свои псевдоклассы.</p>
20
<ul><li>:active - Стиль при нажатии на ссылку, но до перехода по ней.</li>
20
<ul><li>:active - Стиль при нажатии на ссылку, но до перехода по ней.</li>
21
<li>:visited - Стиль уже посещенной ссылки.</li>
21
<li>:visited - Стиль уже посещенной ссылки.</li>
22
<li>:focus - Стиль при событии фокуса на элементе.</li>
22
<li>:focus - Стиль при событии фокуса на элементе.</li>
23
</ul><p>Обратите внимание, что все эти псевдоклассы могут работать не только для ссылок. Не бойтесь экспериментировать :)</p>
23
</ul><p>Обратите внимание, что все эти псевдоклассы могут работать не только для ссылок. Не бойтесь экспериментировать :)</p>
24
<p><a>https://codepen.io/hexlet/pen/VwKdQpp</a></p>
24
<p><a>https://codepen.io/hexlet/pen/VwKdQpp</a></p>
25
<h3>Структурные псевдоклассы</h3>
25
<h3>Структурные псевдоклассы</h3>
26
<p>К структурным псевдоклассам можно отнести те, которые добавляют стили к элементу в зависимости от его месторасположения внутри HTML. Это мощное средство, позволяющее добиться сложных стилей без использования большого количества классов.</p>
26
<p>К структурным псевдоклассам можно отнести те, которые добавляют стили к элементу в зависимости от его месторасположения внутри HTML. Это мощное средство, позволяющее добиться сложных стилей без использования большого количества классов.</p>
27
<p>Основным структурным псевдоклассом является :nth-child(условие). Вы можете увидеть, что это целая функция, которая принимает условие. По этому условию будет выбран элемент или элементы. Разберемся, какие значения она может принимать и какие элементы будут выбраны.</p>
27
<p>Основным структурным псевдоклассом является :nth-child(условие). Вы можете увидеть, что это целая функция, которая принимает условие. По этому условию будет выбран элемент или элементы. Разберемся, какие значения она может принимать и какие элементы будут выбраны.</p>
28
<p>Самое простое - указать конкретный элемент, который нужен. Для этого достаточно указать порядковый номер элемента. Обратите внимание, что элементы должны быть потомками одного родителя и выбираться по одному селектору.</p>
28
<p>Самое простое - указать конкретный элемент, который нужен. Для этого достаточно указать порядковый номер элемента. Обратите внимание, что элементы должны быть потомками одного родителя и выбираться по одному селектору.</p>
29
<p><a>https://codepen.io/hexlet/pen/WNGyMam</a></p>
29
<p><a>https://codepen.io/hexlet/pen/WNGyMam</a></p>
30
<p>Помимо прямого выбора элемента, можно передать специальные последовательности, которые смогут выбрать не один, а сразу несколько элементов.</p>
30
<p>Помимо прямого выбора элемента, можно передать специальные последовательности, которые смогут выбрать не один, а сразу несколько элементов.</p>
31
<ul><li>:nth-child(2n) - выбрать каждый второй элемент. 2, 4, 6, 8... Число может стоять любое. Если поставить 3n, то будет выбран каждый третий элемент и так далее. Это касается всех последовательностей.</li>
31
<ul><li>:nth-child(2n) - выбрать каждый второй элемент. 2, 4, 6, 8... Число может стоять любое. Если поставить 3n, то будет выбран каждый третий элемент и так далее. Это касается всех последовательностей.</li>
32
<li>:nth-child(2n + 1) - выбрать каждый второй элемент,<em>начиная с первого</em>. 1, 3, 5, 7, 9...</li>
32
<li>:nth-child(2n + 1) - выбрать каждый второй элемент,<em>начиная с первого</em>. 1, 3, 5, 7, 9...</li>
33
<li>:nth-child(even) - выбрать все четные элементы. То же самое, что и :nth-child(2n).</li>
33
<li>:nth-child(even) - выбрать все четные элементы. То же самое, что и :nth-child(2n).</li>
34
<li>:nth-child(odd) - выбрать все нечетные элементы. То же самое, что и :nth-child(2n + 1).</li>
34
<li>:nth-child(odd) - выбрать все нечетные элементы. То же самое, что и :nth-child(2n + 1).</li>
35
</ul><p><a>https://codepen.io/hexlet/pen/VwKdQRr</a></p>
35
</ul><p><a>https://codepen.io/hexlet/pen/VwKdQRr</a></p>
36
<p>Похожим псевдоклассом является :nth-of-type(условие). Попробуйте в примере выше заменить nth-child и результат останется тем же. Но зачем нужен еще один псевдокласс с тем же функционалом?</p>
36
<p>Похожим псевдоклассом является :nth-of-type(условие). Попробуйте в примере выше заменить nth-child и результат останется тем же. Но зачем нужен еще один псевдокласс с тем же функционалом?</p>
37
<p><a>https://codepen.io/hexlet/pen/VwKdXwQ</a></p>
37
<p><a>https://codepen.io/hexlet/pen/VwKdXwQ</a></p>
38
<p>Приглядитесь внимательно. В случае с nth-child отсчет элементов начался с четного элемента. Но ведь 1 - это нечетное число. Вы будете правы с точки зрения математики, но не логики работы nth-child. Он выбрал все элементы с учетом того, на какой позиции они находятся относительно других элементов в блоке. По этой причине элементы 4 и 5 являются нечетными, хотя и идут подряд. Логика работы следующая:</p>
38
<p>Приглядитесь внимательно. В случае с nth-child отсчет элементов начался с четного элемента. Но ведь 1 - это нечетное число. Вы будете правы с точки зрения математики, но не логики работы nth-child. Он выбрал все элементы с учетом того, на какой позиции они находятся относительно других элементов в блоке. По этой причине элементы 4 и 5 являются нечетными, хотя и идут подряд. Логика работы следующая:</p>
39
<ol><li>Первый элемент внутри блока - h2. Он стоит на нечетной позиции относительно всех элементов внутри родителя.</li>
39
<ol><li>Первый элемент внутри блока - h2. Он стоит на нечетной позиции относительно всех элементов внутри родителя.</li>
40
<li>Элементы 1 и 3 являются четными, так как внутри родителя являются вторым и четвертым элементом соответственно.</li>
40
<li>Элементы 1 и 3 являются четными, так как внутри родителя являются вторым и четвертым элементом соответственно.</li>
41
<li>Элементы 2 и 4 являются нечетными, так как внутри родителя являются третьим и пятым элементом.</li>
41
<li>Элементы 2 и 4 являются нечетными, так как внутри родителя являются третьим и пятым элементом.</li>
42
<li>Заголовок "Вторая часть цифр" - четный элемент внутри родителя.</li>
42
<li>Заголовок "Вторая часть цифр" - четный элемент внутри родителя.</li>
43
<li>Элемент 5 теперь тоже нечетный, так как идет после четного заголовка.</li>
43
<li>Элемент 5 теперь тоже нечетный, так как идет после четного заголовка.</li>
44
</ol><p>Псевдокласс nth-of-type распознает не только позицию элемента, но и его тип. В нашем случае для этого селектора не существует заголовков. Выборка идет только по элементам <div> вне зависимости от того, какие еще элементы находятся внутри родителя.</p>
44
</ol><p>Псевдокласс nth-of-type распознает не только позицию элемента, но и его тип. В нашем случае для этого селектора не существует заголовков. Выборка идет только по элементам <div> вне зависимости от того, какие еще элементы находятся внутри родителя.</p>
45
<p>Не всегда есть потребность использовать такие сложные псевдоклассы. Для некоторых стандартных ситуаций существуют специальные псевдоклассы:</p>
45
<p>Не всегда есть потребность использовать такие сложные псевдоклассы. Для некоторых стандартных ситуаций существуют специальные псевдоклассы:</p>
46
<ul><li>:first-child - выбирает первый элемент внутри родителя.</li>
46
<ul><li>:first-child - выбирает первый элемент внутри родителя.</li>
47
<li>:last-child - выбирает последний элемент внутри родителя.</li>
47
<li>:last-child - выбирает последний элемент внутри родителя.</li>
48
<li>:first-of-type - выбирает первый элемент внутри родителя, учитывая тип элемента.</li>
48
<li>:first-of-type - выбирает первый элемент внутри родителя, учитывая тип элемента.</li>
49
<li>:last-of-type - выбирает последний элемент внутри родителя, учитывая тип элемента.</li>
49
<li>:last-of-type - выбирает последний элемент внутри родителя, учитывая тип элемента.</li>
50
<li>:only-child - выбирает элемент, если он единственный внутри родителя.</li>
50
<li>:only-child - выбирает элемент, если он единственный внутри родителя.</li>
51
</ul>
51
</ul>