Псевдоклассы в CSS3
Описание псевдо-классов
- :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— для чтения и записи.
Поддержка в браузерах
| Название | 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 | — | — | — | — |