Реальный пиарСоздание сайтовВёрстка → Псевдоклассы в CSS

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

что такое HTML

Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.

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

В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)

Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.

Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :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 документе это тег <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 — для чтения и записи.

Ну что, классно? Сообщения о валидации формы можно без JS выводить, подсвечивать активные поля, писать меньше кода — эх, красота была бы, если это бы добро работало везде ;-) Мечтания в сторону, переходим к таблице поддержки браузерами.


Источник: http://vremenno.net

Рекомендуем



Всегда используйте :hover вместе с :focus Если для :hover заданы простые правила, например, только изменение цвета текста, пренебрежение :focus не влечет за собой серьезных проблем


Делаем более понятные и удобные файлы стилей Название файла стилей должно быть информативным и отражать его содержание, то есть глядя на название файла стилей в папке вы должны сразу понимать, какие именно стили он содержит


Оптимизация CSS для ускорения обработки браузерами Сегодня хочу поговорить о том, как браузеры обрабатывают правила CSS и как писать эти самые правила так, чтобы страница рендерилась быстрее