Псевдоклассы в CSS

Мы видели в основном три типа селекторов CSS:

• обычные, где р в CSS нацеливается на HTML-элементы <p>;
• классы, где .intro в CSS нацеливается на элементы с атрибутом class=”intro”;
• идентификаторы, где #logo в CSS нацеливается на элемент с атрибутом id=”logo”.

Ко всем этим селекторам могут прикрепляться псевдоклассы. Псевдокласс:

• определяет конкретное состояние элемента;
• это ключевое слово, которое начинается с двоеточия.

Синтаксис

Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

селектор:псевдокласс { }

Пробела между селектором и псевдоклассом нет, чтобы показать, что они связаны друг с другом.

:hover

К примеру, типовым используемым псевдоклассом является :hover, который будет применять стиль, когда на целевой элемент наводитсяуказатель мыши. Давайте проверим это на ссылках.

HTML

<p>Наведите курсор <a href="#">на эту ссылку</a> и увидите, как она становится красной.</p>

CSS

a { color: blue; }
a:hover { color: red; }

Первая строка в CSS определяет, что все элементы <a> должны выглядеть синими. Вторая строка определяет, что при наведении указателя мыши <a> должны выглядеть красными.

Вторая строка ориентирована на те же элементы HTML, но только, когда происходит что-то конкретное (в данном случае, наведение).

:visited

Этот псевдокласс нацеливается на ссылки, которые уже были посещены. По умолчанию ссылки отображаются синими и при посещении становятся фиолетовыми. Результаты Google работают так же.

HTML

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.mozilla.org">Mozilla</a>
<a href="http://marksheet.io/visited.html">MarkSheet</a>

CSS

a { color: dodgerblue; }
a:visited { color: rebeccapurple; }

Менять цвет посещённых ссылок часто забывают, но пользователям так удобнее просматривать список результатов. Это помогает им легко определять, где они уже были.

:focus

Данный псевдокласс происходит, когда элемент HTML получает фокус. Это особенно полезно для полей форм.

.form-input { border: 2px solid grey; padding: 5px; }
.form-input:focus { background: lightyellow; border-color: blue; outline: none; }

Правило outline: none удаляет свечение вокруг поля.

:first-child и :last-child

Эти псевдоклассы связаны с иерархией в HTML. Они нацеливаются на элементы HTML в зависимости от порядка, в котором они появляются в коде.

HTML

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
</ul>

CSS

li:first-child { background: greenyellow; }
li:last-child { background: lightsalmon; }

Как вы можете видеть, ни один стилевой класс не применяется к первому и последнему <li>. Их положение в иерархии определяется с помощью правил CSS.

Если бы нам понадобилось добавить пятый пункт списка, то применяя тот же CSS, стилизация автоматически изменится.

:nth-child

Данный псевдокласс является  глобальной версией :first-child и :last-child. С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

К примеру, если вы хотите нацелиться на второй дочерний элемент, то используйте :nth-child(2).

li:nth-child(2) { background: violet; }

odd и even

Кроме использования чисел, :nth-child поставляется с двумя ключевыми словами:

• :nth-child(odd) нацелится на каждый нечётный элемент; 
• :nth-child(even) нацелится на каждый чётный элемент.

li:nth-child(odd) { background: gold; }

Счётчик n

Мощным аспектом :nth-child является то, что он может нацелиться на элементы, основываясь на расчётах с помощью ключевого слова n.

Значение n повышается от 0 до количества представленных дочерних элементов.

Что делать, если вы хотите нацелиться на каждый третий элемент?

li:nth-child(3n) { background: hotpink; }

В нашем случае n начинается с нуля и заканчивается шестью.

Компьютеры начинают отсчёт с нуля. И поскольку в нашем списке семь элементов, мы будем считать до шести, потому что 0-1-2-3-4-5-6 представляют семь пунктов.

Вы можете прочитать :nth-child(3n) как «нацелиться на каждый элемент, положение которого делится на 3». В нашем случае, это третий и шестой пункт списка:

• 3 умножить на 0 равен нулю; 
• 3 умножить на 1 — третий пункт; 
• 3 умножить на 2 — шестой пункт.

n + 1

Что делать, если вы хотите нацелиться на первый пункт и каждый третий пункт после него?

li:nth-child(3n+1) { background: limegreen; }

3n + 1 состоит из двух частей:

• 3n выбирает каждый третий пункт; 
• +1 смещает начало на 1.

Вот как были выполнены вычисления:

• 3 умножить на 0 плюс 1 равно 1; 
• 3 умножить на 1 плюс 1 равно 4; 
• 3 умножить на 2 плюс 1 равно 7.

Счётчик n является очень гибким. Если вычисления делать сложно, то просто протестируйте, чтобы получить правильную выборку.