Ссылки по теме

CSS Pseudo-classes (w3school)

CSS Pseudo-elements (w3school)

Временно.нет (источник)

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

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

  • :link — отвечает за стили не посещенной ссылки;
  • :hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
  • :active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
  • :visited — состояние посещенной ссылки;
  • :focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
  • :first-child — первый дочерний элемент текущего элемента;
  • :last-child — соответственно, последний дочерний элемент чего-то;
  • :only-child — применяет стиль к элементу, если он единственный дочерний элемент;
  • :nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
  • :nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и четность, к примеру вот так: ul li:nth-last-child(2n+1);
  • :lang() — если у элемента указан язык (с помощью атрибута lang, например lang="en"), то этот элемент можно выбрать так;
  • :root— дает указание применить стиль к корневому элементу (в html документе это тег <html>);
  • :not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не <div>);
  • :empty — выбирает пустые элементы;
  • :first-of-type — применяет стиль к первому элементу этого типа, то есть если у вас есть два дива, стиль будет работать только для первого из них;
  • :last-of-type — аналогично предыдущему, только для последнего элемента;
  • :only-of-type — применяет стили к элементы, если он имеет уникальный тип внутри своего родителя;
  • :nth-of-type() — выбирает указанный по счету с начала элемент текущего типа;
  • :nth-last-of-type() — тоже самое, но отсчет с конца;
  • :target — например, если у вас адрес имеет вид index.html#anchor, то этот псевдо-класс задаст правило для элемента с id="anchor";
  • :enabled — выбирает активные инпуты;
  • :disabled — а этот неактивные;
  • :checked — отмеченные чекбоксы и выбранные радиобаттоны;
  • :indeterminate — для радиобаттонов и чекбоксов определяет состояние, когда они «никакие», то есть ни выбраны, ни не выбраны;
  • :default — элемент по-умолчанию, например кнопка отправки формы;
  • :valid — стиль для правильного инпута (когда указана data type в HTML 5);
  • :invalid — когда, соответственно, инпут невалиден;
  • :in-range — когда значение инпута находится в заданных границах (type="range", задан min и max, но это все только в HTML 5);
  • :out-of-range — когда не попадает в границы;
  • :required — все обязательные поля;
  • :optional — все необязательные;
  • :read-only — те элементы, которые доступны только для чтения;
  • :read-write — для чтения и записи.

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

 НазваниеFirefoxIEWebKitOpera
:link1.03.0857.0
:visited1.03.0857.0
:active1.0857.0
:hover1.07.0419.37.0
:focus1.08.0Все7.0
:first-child1.07.0857.0
:lang()1.28.05257.5
:root1.0859.5
:not()1.0859.5
:empty1.84129.5
:first-of-type1.9.15259.5
:last-child1.05259.5
:last-of-type1.9.15259.5
:only-child1.85259.5
:only-of-type1.9.15259.5
:nth-child1.9.15259.5
:nth-last-of-type1.9.15259.5
:nth-last-child1.9.15259.5
:nth-of-type1.9.15259.5
:target1.3525Местами
:enabled1.85259.0
:disabled1.85259.0
:checked1.05259.0
:indeterminate1.9.2522
:default1.99.0
:valid1.89.0
:invalid1.89.0
:in-range1.89.0
:out-of-range1.89.0
:required9.0
:optional9.0
:read-only
:read-write