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

Псевдоклассы описывают характеристики элементов. такие как динамическое состояние &%238212; нажатая ссылка, язык кодировки &%238212; абзац на французском языке и т.д. Они не отображаются в исходном документе и не принадлежат дереву документа DOM (дереву документа принадлежат только сами html-элементы).

Разметка html-страниц создаётся с помощью html-элементов. Для каждого html-элемента существуют css-стили по-умолчанию, так называемые стили браузера, например, полужирное начертание и разный размер шрифта заголовков h1-h6, подчёркивание и фиолетовый цвет текста ссылки. Эти стили по-умолчанию можно изменять, а также задавать дополнительные, пользовательские, с помощью таблиц стилей.

Без использования псевдоклассов изменить внешний вид по-умолчанию и задать индивидуальный для каждого элемента можно только используя селектор &%238212; имя тега, класс или идентификатор элемента. Но как быть в случае, когда нужно выделить фоном каждую чётную строку таблицы? Прописывать классы вручную для каждой строки таблицы займёт много времени и значительно увеличит разметку. В такой ситуации на помощь приходит псевдокласс :nth-child(even). и с помощью селектора tr:nth-child(even) автоматически устанавливается фон для каждой чётной строки таблицы.

Рис. 1. Таблица-зебра с помощью класса и псевдокласса

В процессе взаимодействия пользователя со страницей html-элементы приобретают динамические характеристики. Например, когда вы переходите по ссылке, html-элемент <a>текст ссылки</a> приобретает следующие свойства (характеристики): когда вы наводите на ссылку, она получает a:hover. когда вы уже перешли по ссылке &%238212; a:visited. Доступ к таким динамическим характеристикам можно получить только с помощью псевдоклассов.

Таким образом, с помощью псевдоклассов можно получить доступ к информации, характеризующей элемент, которая не может быть получена с помощью простых селекторов &%238212; p или их комбинации &%238212; h1 p .

Псевдоклассы делятся на статические, например. last-of-type. и динамические, например. hover. т.е. появляющиеся у элемента в процессе взаимодействия пользователя с веб-страницей. Имена псевдоклассов чувствительны к регистру. Некоторые псевдоклассы взаимоисключающие, в то время как другие могут одновременно применяться к одному элементу.

Виды псевдоклассов

1. Динамические псевдоклассы

Выбирают ссылки на странице, которые имеют атрибут href и находятся в определенном состоянии, а также некоторые другие элементы:

link &%238212; не посещенная ссылка;

visited &%238212; посещенная ссылка;

focus &%238212; ссылки, а также элементы форм, над которыми находится курсор мыши или на которые перешли с помощью кнопки TAB;

hover &%238212; ссылки, а также другие элементы, стили применяются при наведении пользователем на элемент;

active &%238212; выбирает элемент, активированный пользователем с помощью клика мышки. Обычно применяется для ссылок, но может отбирать и другие элементы на странице.

Относятся к элементам форм.

disabled &%238212; используется для отбора и стилизации заблокированных для выбора и изменения элементов форм;

enabled &%238212; отбирает не заблокированные для выбора и изменения элементы форм;

checked &%238212; применяется для выбора и стилизации элементов <input type="radio">. <input type="checkbox">. а также элементов <option></option>. находящихся внутри элемента <select></select> ;

indeterminate &%238212; элементы радио и чекбокс могут быть включены или выключены пользователем. Некоторые из них могут находиться в неопределенном состоянии, к которым и применяется данный псевдокласс.

3. Структурные псевдоклассы

Представляют концепцию структурных псевдоклассов, которая позволяет отбирать элементы на основании информации, которая отражена в дереве документа и не может быть получена при помощи простых селекторов или их комбинации. Отсчёт начинается с элемента с индексом 1.

root &%238212; элемент, являющийся корневым в документе;

nth-child() &%238212; элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
li:nth-child(even) &%238212; каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
li:nth-child(odd) &%238212; каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
li:nth-child(3) &%238212; только элемент с индексом 3.
li:nth-child(an b) &%238212; например, li:nth-child(3n 1) выберет первый (3*0 1 = 1), четвёртый (3*1 1 = 4), седьмой (3*2 1 = 7) элементы и т.д. причём значение b может быть равно нулю;

nth-last-child() &%238212; дочерние элементы на основе их индекса внутри контейнера, при этом отсчёт идёт в обратном порядке, т.е. начиная с последнего элемента. Значениями аргумента могут быть положительные, отрицательные значения, а также ключевые слова even odd ;

nth-of-type() &%238212; элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;

nth-last-of-type() &%238212; элементы одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому;

first-child &%238212; элемент, который является первым дочерним элементом некоторого другого элемента;

last-child &%238212; последний дочерний элемент элемента-контейнера;

first-of-type &%238212; элемент, который является первым элементом в список дочерних элементов родительского элемента;

last-of-type &%238212; элемент, который является последним элементом в список дочерних элементов родительского элемента;

only-child &%238212; дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1). но с меньшей специфичностью;

only-of-type &%238212; элемент, который является единственным элементом данного типа в родительском элементе;

empty &%238212; элемент, который не содержит ни одного дочернего элемента.

4. Целевой псевдокласс :target

В данном примере каждой картинке задан id. а каждой ссылке &%238212; соответствующий идентификатор якоря. При нажатии на ссылку каждая картинка увеличивается до стопроцентного размера.

5. Языковой псевдокласс :lang()

Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang="fr". В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) .

6. Псевдокласс отрицания :not()

Функциональный селектор псевдокласса, который принимает в качестве значения простой селектор, а затем отбирает элементы, которые не содержат указанное значение аргумента. Значениями аргументов могут быть только следующие:

селекторы элемента. например. not(strong)

селекторы класса и идентификатора. например, p:not(.text)

селекторы псевдокласса. например, ul:not(:first-child)

селекторы атрибута. например, input:not([type="checkbox"])

7. Комбинация псевдоклассов

При стилизации элементов возможна комбинация псевдоклассов, например:

tr:nth-last-child(even):hover &%238212; добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);

h2:not(:first-of-type):not(:last-of-type) &%238212; добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.