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

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

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

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

Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33. Рассмотрим все детально.

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

  1. :link — отвечает за стили непосещенной ссылки;
  2. :hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
  3. :active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
  4. :visited — состояние посещенной ссылки;
  5. :focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
  6. :first-child — первый дочерний элемент текущего элемента;
  7. :last-child — соответственно, последний дочерний элемент чего-то;
  8. :only-child — применяет стиль к элементу, если он единственный дочерний элемент;
  9. :nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
  10. :nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);
  11. :lang() — если у элемента указан язык (с помощью атрибута lang, например lang=»en»), то этот элемент можно выбрать так;
  12. :root — дает указание применить стиль к корневому элементу (в html документе это тег <html>);
  13. :not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не <div>);
  14. :empty — выбирает пустые элементы;
  15. :first-of-type — применяет стиль к первому элементу этого типа, то есть если у вас есть два дива, стиль будет работать только для первого из них;
  16. :last-of-type — аналогично предыдущему, только для последнего элемента;
  17. :only-of-type — применяет стили к элементы, если он имеет уникальный тип внутри своего родителя;
  18. :nth-of-type() — выбирает указанный по счету с начала элемент текущего типа;
  19. :nth-last-of-type() — тоже самое, но отсчет с конца;
  20. :target — например, если у вас адрес имеет вид index.html#anchor, то этот псевдо класс задаст правило для элемента с id=»anchor»;
  21. :enabled — выбирает активные инпуты;
  22. :disabled — а этот неактивные;
  23. :checked — отмеченные чекбоксы и выбранные радиобаттоны;
  24. :indeterminate — для радиобаттонов и чекбоксов опеределяет состояние, когда они «никакие», то есть ни выбраны, ни не выбраны (ужас как написал 😉
  25. :default — элемент по-умолчанию, например кнопка отправки формы;
  26. :valid — стиль для правильного инпута (когда указана data type в HTML 5);
  27. :invalid — когда, соответственно, инпут невалиден;
  28. :in-range — когда значение инпута находиться в заданных границах (type=»range», задан min и max, но это все только в HTML 5);
  29. :out-of-range — когда не попадает в границы;
  30. :required — все обязательные поля;
  31. :optional — все необязательные;
  32. :read-only — те элементы, которые доступны только для чтения;
  33. :read-write — для чтения и записи.

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

Поддержка псевдоселекторов в разных браузерах

Как вы понимаете, ограниченность использование псевдоклассов не так просто появилась, вызвана она частичной их поддержкой в браузерах. Чего уж говорить про какой-нибудь :out-of-range, если даже :active достаточно странно работает в нашем любимом ИЕ.

В ячейке указано либо нет (совсем нет), либо версия или билд, начиная с которого псевдокласс поддерживается.

Gecko
(Firefox)
Trident
(IE)
Webkit
(Chrome/Safari)
Presto
(Opera)
:link1.03.0857.0
:visited1.03.0857.0
:active1.0Нет857.0
:hover1.07.0419.37.0
:focus1.08.0Yes7.0
:first-child1.07.0857.0
:lang()1.28.05257.5
:root1.0Нет859.5
:not()1.0Нет859.5
:empty1.8Нет4129.5
:first-of-type1.9.1Нет5259.5
:last-child1.0Нет5259.5
:last-of-type1.9.1Нет5259.5
:only-child1.8Нет5259.5
:only-of-type1.9.1Нет5259.5
:nth-child1.9.1Нет5259.5
:nth-last-of-type1.9.1Нет5259.5
:nth-last-child1.9.1Нет5259.5
:nth-of-type1.9.1Нет5259.5
:target1.3Нет525Частично
:enabled1.8Нет5259.0
:disabled1.8Нет5259.0
:checked1.0Нет5259.0
:indeterminate1.9.2Нет522Нет
:default1.9НетНет9.0
:valid1.8НетНет9.0
:invalid1.8НетНет9.0
:in-range1.8НетНет9.0
:out-of-range1.8НетНет9.0
:requiredНетНетНет9.0
:optionalНетНетНет9.0
:read-onlyНетНетНетНет
:read-writeНетНетНетНет

Вот так, весь кайф обламали ;-(
Хотя, никто же не запрещает вам использовать псевдоклассы. Просто делайте ваши стили так, что если браузер пользователя не поддерживает тот или инойпсевдоселектор, он (пользователь) не страдал от этого, то есть все жизненно важные для пользования сайтом вещи должны работать как часы и безпсевдоклассов.

Статья взята с сайта:https://vremenno.net

Добавить комментарий