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

Автор: | Дата:

Описание псевдо-классов

Ссылочные псевдо-селекторы

  • :link — Определяет стиль  не посещенной ссылки;
  • :hover — Определяет стиль элемента при наведении на него мышкой;
  • :active — Определяет стиль активной элемента.;
  • :visited —Определяет стиль посещенной ссылки;

Селекторы для элементов ввода и ссылок

  • :focus — Определяет стиль для используемого в текущий момент элемента. К примеру: если вы установили курсор в поле ввода;
  • :target — К примеру, если у вас url вида  index.html#anchor, то данный псевдо-класс применит правило для элемента с id="anchor";
  • :enabled — Выбирает активные input;
  • :disabled — Выбирает неактивный input;
  • :checked — Позволяет применять стили к выбранным чекбоксам и выбранным radio button;
  • :indeterminate — для radio button и checkbox определяет состояние, когда они «никакие», то есть ни выбраны, ни не выбраны;
  • :default — Элемент по-умолчанию, например кнопка отправки формы;

Позиционные и нумерованные селекторы

  • :first-child — Первый дочерний элемент текущего элемента;
  • :last-child — Последний дочерний элемент чего-то;
  • :only-child — Применяет стиль к элементу, если он единственный дочерний элемент;
  • :nth-child () — Указываем номер  элемента по счету с начала дочерний элемент, например p:nth-child (3);
  • :nth-last-child () — Аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и четность, к примеру вот так: ul li:nth-last-child (2n+1);
  • :root— Применяет стиль к корневому элементу (в html  это тег <html>);
  • :first-of-type — Применяет стиль к первому элементу этого типа, то есть если у вас есть два дива, стиль будет работать только для первого из них;
  • :last-of-type — Аналогично предыдущему, только для последнего элемента;
  • :only-of-type — Применяет стили к элементы, если он имеет уникальный тип внутри своего родителя;
  • :nth-of-type () — Выбирает указанный по счету с начала элемент текущего типа;
  • :nth-last-of-type () — аналогично, но отсчет с конца;

Реляционные селекторы

  • :not () — Дает ограничение на применение стилей по селектору (то есть селектор .red-block:not (div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не <div>);
  • :empty — Позволяет выбрать и применить стили ко всем пустым элементам;
  • :first-letter — Выбирает первую букву текста в элементе;
  • :first-line — Выбор первой строки в тексте элемента;
  • :lang () — Можно выбрать элемент у которого установлен язык  (к примеру lang="en");
  • ::selection —позволяет изменить цвет выделения текста в элементе. Например, можно указать цвет выделения в первом абзаце;
  • :before — позволяет добавить контент перед элементом. Например, если необходимо добавить кавычки к цитате;
  • :after — позволяет добавлять контент после элемента. Например, по принципу предыдущего примера, добавляем кавычки после цитаты. А также используют для добавления пустого пространства, после элемента. так называемый clearfix, без использования дополнительной HTML-разметки.
  • :valid — Стиль для правильного input(когда указана data type в HTML 5);
  • :invalid — Применяет стили для невалидных input элементов;
  • :in-range — Когда значение input находится в заданных границах (type="range", задан min и max, но это все только в HTML 5);
  • :out-of-range — Когда не попадает в границы;
  • :required — Все обязательные поля;
  • :optional — Все необязательные;
  • :read-only — Те элементы, которые доступны только для чтения;
  • :read-write — Для чтения и записи.
  • ::-moz-placeholder Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Firefox.
  • ::-webkit-input-placeholder Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Chrome.

Поддержка псевдоклассов в браузерах

Не все псевдоклассы отображаются корректно во всех браузерах. В не которых они не работают во все. Так что, обязательно проверяйте во всех браузерах.

 Название Firefox IE WebKit Opera
:link 1.0 3.0 85 7.0
:visited 1.0 3.0 85 7.0
:active 1.0 85 7.0
:hover 1.0 7.0 419.3 7.0
:focus 1.0 8.0 Все 7.0
:first-child 1.0 7.0 85 7.0
:lang () 1.2 8.0 525 7.5
:root 1.0 85 9.5
:not () 1.0 85 9.5
:empty 1.8 412 9.5
:first-of-type 1.9.1 525 9.5
:last-child 1.0 525 9.5
:last-of-type 1.9.1 525 9.5
:only-child 1.8 525 9.5
:only-of-type 1.9.1 525 9.5
:nth-child 1.9.1 525 9.5
:nth-last-of-type 1.9.1 525 9.5
:nth-last-child 1.9.1 525 9.5
:nth-of-type 1.9.1 525 9.5
:target 1.3 525 Местами
:enabled 1.8 525 9.0
:disabled 1.8 525 9.0
:checked 1.0 525 9.0
:indeterminate 1.9.2 522
:default 1.9 9.0
:valid 1.8 9.0
:invalid 1.8 9.0
:in-range 1.8 9.0
:out-of-range 1.8 9.0
:required 9.0
:optional 9.0
:read-only
:read-write

Полную таблицу соответствий можно посмотреть на данном сайте. Чуть позже обновлю и здесь до актуального состояния