Псевдоклассы CSS
Псевдоклассы CSS позволяют изменять динамическое состояние элемента веб страницы. В качестве динамического состояния может выступать нажатие на элемент, наведение курсора и тп.
Внешний вид элементов изменяется с помощью селекторов. Но что если вам необходимо в таблице изменить все четные строки. То есть добавить цветную заливку или изменить в них цвет текста. Можно прописать класс для каждой четной строки вручную, но это займет время и увеличит размер страницы. Простым решением будет использовать псевдокласс :nth-child(even) для селектора tr.
tr:nth-child (even) {
color:green;
}
Этот код сделает цвет текста во всех четных строках таблицы на зеленый.
Кроме этого в процессе взаимодействия пользователя со страницей возникают динамические состояния. К примеру когда посетитель наводит указатель мыши на элемент <a>Ссылка</a> возникает его динамическое состояние a:hover. А когда пользователь нажимает на элемент то возникает динамическое состояние a:visited.
Псевдоклассы CSS бывают следующих видов:
- Динамические.
- Псевдоклассы пользовательского интерфейса.
- Структурные псевдоклассы.
- Целевой псевдокласс :target.
- Языковой псевдокласс :lang().
- Псевдокласс отрицания :not().
- Комбинация псевдоклассов.
Динамические псевдоклассы
В большинстве случаев применяются к ссылкам на странице. Но так же могут применяться к другим элементам веб страницы. Динамических псевдоклассов несколько. Каждый отвечает за свою динамическую характеристику элемента.
:link — Стиль применяется к непосещенным ссылка;
:visited — Стиль применяется к ссылке которую вы уже посетили на странице;
:focus — Применение стиля к ссылкам, или элементам, которые были активированы курсором или же с помощью клавиатуры (клавишой TAB). Чаще всего используется для элементов форм;
:hover — используется для применения стилей к элементами на которые наведен курсор мыши;
:active — выбирается элемент страницы на который было произведено нажатие мыши. Применяется как к ссылкам так и другим элементам веб страницы.
Псевдоклассы CSS для пользовательского интерфейса
Псевдоклассы данного типа применяются к элементам форм, которым заданы определенные атрибуты.
:disabled — стили для заблокированных к изменению элементов форм;
:enabled — противоположный предыдущему, применяет стили к не заблокированным элементам формы;
:checked — стилизация таких элементов как: <input type="radio">, <input type="checkbox">, а также элементов <option></option>, находящихся внутри элемента <select></select>;
:indeterminate — применяется к элементам формы таким как радио и чекбокс. Такие элементы формы могут находиться в неопределенном состоянии. Именно к таким и применяются стили.
Структурные псевдоклассы CSS
Наверное самый обширный вид псевдоклассов. Есть очень много различных вариантов применения стилей. Все элементы выбираются а основе дерева документа. То есть возможно настроить применение стилей к дочерним, вложенным, родительским элементам. Кроме этого есть возможность настройки стилей ко всем элементам которые не содержат дочерних элементов. Если вам нужно применить стили к каждому второму элементу то применение псевдоклассов этого вида заметно облегчит вашу работу.
:root — выбор элемента, который является корневым в документе;
:nth-child() — элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
li:nth-child(even) — каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
li:nth-child(odd) — каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
li:nth-child(3) — только элемент с индексом 3.
li:nth-child(an+b) — например, li:nth-child(3n+1) выберет первый (3*0 +1 = 1), четвёртый (3*1 +1 = 4), седьмой (3*2 +1 = 7) элементы и т.д., причём значение b может быть равно нулю;
:nth-last-child() — дочерние элементы на основе их индекса внутри контейнера, при этом отсчёт идёт в обратном порядке, т.е. начиная с последнего элемента. Значениями аргумента могут быть положительные, отрицательные значения, а также ключевые слова even odd;
:nth-of-type() — элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) {float: left;} установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;
:nth-last-of-type() — элементы одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому;
:first-child — элемент, который является первым дочерним элементом некоторого другого элемента;
:last-child — последний дочерний элемент элемента-контейнера;
:first-of-type — первый элемент данного типа среди дочерних элементов родительского элемента-контейнера;
:last-of-type — последний элемент данного типа среди дочерних элементов родительского элемента-контейнера;
:only-child — дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью;
:only-of-type — элемент, который является единственным элементом данного типа в родительском элементе;
:empty — элемент, который не содержит ни одного дочернего элемента.
Целевой псевдокласс
Некоторые ссылки указывают на местоположение внутри ресурса. Этот тип ссылок заканчивается символом «решетка» #, за которым следует идентификатор якоря (так называемый идентификатор фрагмента), например https://web-legko.ru/css3/#content. Элемент с идентификатором фрагмента называется целевым элементом. С помощью данного псевдокласса можно стилизовать элемент, к которому перешли по ссылке на странице (навигация по странице), а также элементы, которые расположены в одном блоке и при нажатии на кнопку/ссылку сменяются/перемещаются (например, css-слайдер).
В данном примере каждой картинке задан id, а каждой ссылке — соответствующий идентификатор якоря. При нажатии на ссылку каждая картинка увеличивается до стопроцентного размера.
Языковой псевдокласс
Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang="fr". В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) {css-стили}.
Псевдокласс отрицания
Функциональный селектор псевдокласса, который принимает в качестве значения простой селектор, а затем отбирает элементы, которые не содержат указанное значение аргумента. Значениями аргументов могут быть только следующие селекторы:
- элемента, например, body :not(strong)
- класса и идентификатора, например, p:not(.text)
- псевдокласса, например, ul:not(:first-child)
- атрибута, например, input:not([type="checkbox"])
Комбинации псевдоклассов
При стилизации элементов возможна комбинация псевдоклассов CSS, например:
tr:nth-last-child(even):hover — добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);
h2:not(:first-of-type):not(:last-of-type) — добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.