Псевдоклассы CSS позволяют нам изменять оформление отдельных частей страницы в зависимости от изменения их состояния.

На практике это выглядит словно у элемента, при определенных условиях (к примеру при наведении мыши) появляется класс, который позволяет ему изменить свое оформление.

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

Как пользоваться селекторами псевдоклассов CSS?

Основная задача селектора — выбор всех элементов из структуры документа подпадающих под определенные характеристики. В нашем случае состояние которых соответствует спецификации определенных псевдоклассов.

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

.formSubmit:hover {
  background-color:  #999;
}

К одному элементу можно применять одновременно несколько таких селекторов. Оформление элементов заданное таким образом будет применяться только в случае совпадения всех условий активации перечисленных псевдоклассов CSS.

К примеру изменим размер шрифта первого элемента списка при наведении:

li:first-child:hover {
  font-size: 22px;
}

Подобные приемы в работе с CSS позволяют сократить html код и уменьшить время на верстку страницы в целом.

Классификация псевдоклассов CSS

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

• :hover — выделяет элемент на который наведен курсор мыши.
• :active — применяется для активного элемента. Активным считается элемент во время клика. Обычно используется для изменения цвета ссылки при клике по ней.
• :focus — выделяет элемент на котором установлен фокус ( к примеру курсор в текстовом поле формы).

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

• :link — выделяет ссылки, которые еще не были посещены пользователем.
• :visited — задает оформление ссылкам посещенным пользователем.

Псевдоклассы форм

• :read-only — выделяет элемент формы у которого присутствует атрибут readonly (запрещает изменение или выбор данного элемента формы). Мы можем сделать такие поля к примеру полупрозрачными, чтобы у пользователей не возникало желания кликнуть на них.
• :read-write — обратный :read-only селектор. Применится к элементам доступным для выбора и изменения.
• :disabled — применяется для форматирования элементов форм с атрибутом disabled (запрещает нажатие, выделение и тд элементов формы). Схож с предыдущим классом.
• :enabled — антипод :disabled. Выберет все доступные для воздействия элементы формы. По умолчанию доступны все элементы. Недоступными они становятся только после прописывания у них атрибута disabled.
• ::-moz-placeholder — применяется к элементам формы с атрибутом placeholder. Работает в браузере firefox и позволяет изменять внешний вид текста (шрифт, цвет и тд)
• ::-webkit-input-placeholder — аналогичен предыдущему псевдоклассу, только на этот раз работает в crome и safari.
• :checked — применяется к полям типа checkbox (переключателям) и radio (флажкам) для обозначения их включенного состояния.
• :indeterminate — псевдокласс обратный :checked. Оформляет флажки и переключатели в неактивном состоянии.
• :required - выберет элементы с атрибутом required (делает поле обязательным для заполнения перед отправкой формы)
• :optional — обратный :required селектор. Выберет все элементы не обязательные для заполнения.
• :root – выбирает корневой тег документа. Соответствует тегу html.
• :valid – после заполнения поля формы, если содержимое соответствует типу, который должен быть введен в поле (к примеру в поле с type="number" введен номер), то считается, что поле прошло проверку на валидность данных. К такому полю и будет применен данный селектор.
• :invalid — обратный :valid селектор.  Применяется если поле не прошло проверку на валидность (к примеру в поле с type="number" введен текст).

В зависимости от расположения элемента

• :first-child – применится к первому дочернему элементу тега. Можно использовать к примеру для нестандартного оформления первого пункта списка.
• :last-child – элемент оформления обратный :first-child. Применяется к последнему дочернему элементу тега.
• :nth-child(значение) — добавит стиль дочерним  элементам с определенным номером (согласно нумерации дерева элементов). Возможные значения: число — определенный номер элемента; odd — все нечетные элементы; even — все четные элементы; выражение по типу an + b, где a и b целые числа, а n счетчик изменяющий свой номер от 0 до бесконечности.
• :nth-last-child(значение) — различие с предыдущим псевдоклассом заключается только в том, что нумерация происходит не от первого, а от последнего элемента.
• :only-child — выберет дочерний элемент родителя только при условии, что он у него один.
• :first-of-type – выбирает первый элемент заданного типа (к примеру одинаковые теги) относящийся к одному родителю. Попробую пояснить — тег td является дочерним для tr. При применении данного псевдокласса к td все первые ячейки в рядках изменят свое оформление.
• :last-of-type – псевдокласс обратный :first-of-type — послдений элемент заданного типа относящийся к одному родителю.
• :nth-of-type(значение) – по аналогии с :first-of-type  добавит стиль дочерним  элементам определенного типа относящимся к одному родителю с определенным номером (согласно нумерации дерева элементов). Возможные значения: число — определенный номер элемента; odd — все нечетные элементы; even — все четные элементы; выражение по типу an + b, где a и b целые числа, а n счетчик изменяющий свой номер от 0 до бесконечности.
• :nth-last-of-type(значение) – от :nth-of-type отличается только тем, что нумерация элементов идет не с конца, а с начала.
• :only-of-type — выберет дочерний элемент родителя заданного типа, только если он у него один.

Прочие

• :empty – выделяет все пустые элементы. Пустым считается элемент в котором ничего нет. К примеру <span></span> - пустой элемент, а <span> </span>[/code]], [[code]]<span>&nbsp;</span> и тд уже нет.
• :lang(язык) – выбирает элементы по языку используемому в них. Использутеся для создания различий при выводе различных языков в документе. Как пример- разных кавычек в текстах на разных языках.Язык задается в виде аббревиатуры из английских букв (по типуru, en, fr, it). Источником информации о языке служат метатег content-language и атрибут lang.
• :not(селектор) - задает оформление для всех элементов не содержащих определенный селектор.
• :target — изменит оформление идентификатора заданного в адресной строке браузера (происходит при переходе по ссылке с якорем в документе по примеру http://ваш_сайт/#target)

Подводя итоги

Используя псевдоклассы CSS мы можем делать наши сайты значительно динамичнее и выводить юзабилити (удобство пользования сайтом) на принципиально новый уровень. Это становится лишним бонусом для улучшении поведенческих факторов пользователей на сайте в дальнейшем (помогает в продвижении сайта в поисковых системах) да и просто крайне благоприятно складывается на внешнем виде сайта.