22 декабря 2015
9 апреля 2010
41
Псевдоклассы в CSS
Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в 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 выводить, подсвечивать активные поля, писать меньше кода — эх, красота была бы, если это бы добро работало везде ;-) Мечтания в сторону, переходим к таблице поддержки браузерами.
Поддержка псевдоселекторов в разных браузерах
Как вы понимаете, ограниченность использование псевдоклассов не так просто появилась, вызвана она частичной их поддержкой в браузерах. Чего уж говорить про какой-нибудь :out-of-range, если даже :active достаточно странно работает в нашем любимом ИЕ.
В ячейке указано либо нет (совсем нет), либо версия или билд, начиная с которого псевдокласс поддерживается.
| Gecko (Firefox) | Trident (IE) | Webkit (Chrome/Safari) | Presto (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 | Yes | 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 | Нет | Нет | Нет | Нет |
Вот так, весь кайф обламали ;-(
Хотя, никто же не запрещает вам использовать псевдоклассы. Просто делайте ваши стили так, что если браузер пользователя не поддерживает тот или иной псевдоселектор, он (пользователь) не страдал от этого, то есть все жизненно важные для пользования сайтом вещи должны работать как часы и без псевдоклассов.
Не имеют смысла эти псевдоклассы, раз эксполитр не поддерживает их.
Нафиг надо.
Верстаю давно, но для того, чтобы реализовывать функционал этих селекторов обычно использовал дополнительные классы. Теперь буду умнее :)
Жону по поводу IE: для него всё равно обычно выделяется дополнительная таблица стилей с костылями на каждом шагу, так что использовать описанное можно и нужно.
на самом деле навряд ли стоит использовать, если только для каких либо внутренних корпоративных проектов, где можно посадить всех на один браузер, а вот для рунета - все таки рано (ие сразу мимо, + несоответсвие по последним позициям списка). Опять же если только кастылями спасаться :)
2. «:hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой»
4. «:hover — состояние элемента при наведении на него»
но куда из этого списка подевались такие псевдоклассы как :before и :after?
за статью спасибо.
Ответ фотошопному спамеру: вообще-то Opera, пожалуй, самый передовой браузер. Например, многие элементы и атрибуты HTML5 она поддерживала ещё с версий 9.*.
А в комментах все вроде без ошибок пишут.
Опера, все-таки, не очень передовой браузер. Хром и лиса идут быстрее (Хотя я сам пользуюсь оперой).
B@rmaley.exe, а какая связь с популярностью?
Кстати, половина селекторов из статьи описаны только в CSS3, который постоянно дополняется и редактируется. Поэтому когда-то этот список был короче.
А смысл его в какой-то мере проиллюстрирован здесь.
В виндовых окошках так обозначаются чекбоксы, состояние которых нельзя выразить точно (Например, атрибут "Только для чтения" для нескольких файлов, среди которых один для чтения, а остальные еще и для записи).
Лично я пока пользовался только hover, link и visited.
hover отлично идет для вещей вроде
#counters a{opacity:.3;-moz-opacity:.3;filter:alpha(opacity=30);}
#counters a:hover{opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);}
а есть пример использования кросс-браузерного first-child?
Так, что HTML5 верстку можно использовать. По крайней мере учиться ее использовать уже пора :)
Вообще я не использую такое количество псевдоклассов, но прочитал с интересом, да уж, стольких вещей не знал в CSS
Статья отличная! ;) Респект!
Не знал как обозначать энную строчку (в таблице) особым способом. Приходилось ява скриптом проганять и призначать класс.
Теперь мое судоку www.sergunik.name/?p=216 будет быстрее работать:)
..в закладки :), чтоб не забыть
Вообще планирую на своих будущих сайта специально не делать поддержку IE, буду размещать картинку с перечеркнутым IE, знаете как на дверях в магазинах делают, типа "вход с напитками воспрещен".
ul > li+li {color:red;} - меняет цвет текста с 2-го до конечного элемента li, если написать
ul > li+li+li - то с 3-го, ну и так дальше, иногда такой подход выручает), и это работает в IE7+, FF, в остальных не тестил.