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

Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33.

Название и назначение псевдоклассов

: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 документе это тег );
: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 — для чтения и записи.

Многие браузеры, многие псевдоклассы не поддерживают -( взято с временно.нет

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *