Pseudo-classes

Pseudo-classes Техника

Pseudo-classes

От автора: селектор псевдо-класса CSS :root используется для выбора родителя самого высокого уровня данной спецификации. В спецификации HTML, :root по сути, эквивалентен селектору html.

В сниппете CSS ниже стили :root и html будут делать то же самое:

Если вы заметили, я сказал, что :root по сути эквивалентно селектору html. На самом деле, селектор :root имеет больше полномочий, чем html. Это потому, что он на самом деле считается селектором псевдо-класса (как, например, :first-child или :hover).

Pseudo-classes

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

4 месяца обучения 24 практических работы

Как селектор псевдо-класса, он обладает большей специфичностью, чем селекторы тегов:

Несмотря на то, что селектор html следует за ним, :root все равно является приоритетным, благодаря более высокой специфичности!

Содержание
  1. Пересечение спецификаций
  2. Практическое использование
  3. Единицы области просмотра
  4. Root и var()
  5. Пользовательские свойства CSS и переменные препроцессора
  6. Написание простой HTML-страницы
  7. Написание базового CSS для нашей HTML-страницы
  8. Добавление темной темы CSS
  9. Переключение тем с помощью JavaScript
  10. Изменение пользовательских свойств CSS с помощью JavaScript
  11. Заключение
  12. Иные спецификации
  13. Псевдоклассы состояния отображения элементов
  14. Псевдоклассы состояния ресурсов
  15. Псевдоклассы действий пользователя
  16. Root CSS?
  17. Uses of CSS
  18. – Declare Global CSS Variables
  19. – Set Background Color of the Web Page
  20. – Place Content Before the <Head> Element
  21. – Deploy Responsive Base Font
  22. Web Browser Support
  23. Single Or Double Colon For Pseudo-Elements?
  24. When (Not) To Use CSS Generated Content
  25. Experimental Pseudo-Classes And Pseudo-Elements
  26. States
  27. Link
  28. Visited
  29. Hover
  30. Active
  31. Focus
  32. A Sass Mixin for Links
  33. Structural
  34. First-child
  35. First-of-type
  36. Last-child
  37. Last-of-type
  38. Nth-child
  39. Nth-last-child
  40. Nth-of-type
  41. Nth-last-of-type
  42. Only-child
  43. Only-of-type
  44. Target
  45. Validation
  46. Checked
  47. Default
  48. Disabled
  49. Empty
  50. Enabled
  51. Out-of-range
  52. Indeterminate
  53. Invalid
  54. Optional
  55. Read-only
  56. Read-write
  57. Required
  58. Scope (Experimental)
  59. Language
  60. Dir (Experimental)
  61. Miscellaneous
  62. Fullscreen (Experimental)
  63. Before/
  64. After/
  65. Backdrop (Experimental)
  66. First-letter/
  67. First-line/
  68. Selection
  69. Placeholder (Experimental)
  70. Conclusion
  71. On SmashingMag

Пересечение спецификаций

В спецификации HTML псевдо-класс :root указывает на родителя самого высокого уровня: html. Поскольку CSS также разработан для SVG и XML, вы можете использовать :root для них, и он будет просто соответствовать другому элементу. Например, в SVG родительским элементом высшего уровня является тег svg.

Подобно HTML, :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.

Практическое использование

Для чего практически применяется :root? Как мы уже было сказано, это безопасная замена для селектора html. Это означает, что вы можете делать все, что обычно делаете с селектором html:

Если хотите, вы можете изменить этот код, чтобы использовать Пользовательские свойства CSS для создания переменных на глобальном уровне!

Дополнительным преимуществом использования :root вместо html заключается в том, что вы можете стилизовать SVG-графику!

Подробную документацию по селектору псевдо-класса :root можно найти на Mozilla Developer Network.

Редакция: Команда webformyself.

От автора: сегодня мы рассмотрим, как и для чего можно использовать селектор CSS root. Одним из элементов адаптивного дизайна, с которым бывает сложно определиться, это типографика. В идеале вам хочется получить максимально подходящий шрифт для всех областей просмотра. Обычно для этого нужно начать с базового размера шрифта и потом менять его для различных контрольных точек.

В этом примере шрифт не меняется по тех пор, пока не достигнута контрольная точка.

Я предпочитаю такой подход к гибкой типографике, при котором нужно рассчитать размер шрифта, исходя из высоты и ширины области просмотра с помощью селектора :root:

Теперь можно задействовать элемент em , основанный на значении, подсчитанном посредством :root:

Единицы области просмотра

Вы заметите, что функции calc() были переданы значения в единицах области просмотра. Давайте кратко рассмотрим их, чтобы понять, как рассчитывается размер шрифта в селекторе root.

1vw = 1% от ширины области просмотра

1vh = 1% от высоты области просмотра

1vmin = 1vw or 1vh, выбрать меньшее

1vmax = 1vw or 1vh, выбрать большее

Если мы применим это к размерам области просмотра iPhone 7 — 375×667, рассчитанное значение:root будет:

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

От автора: в этом руководстве по тому, как создаются в CSS темы, мы будем использовать пользовательские свойства (также известные как переменные CSS) для реализации динамических тем простой HTML-страницы. Мы создадим темные и светлые варианты тем, затем напишем JavaScript, чтобы переключаться между ними, когда пользователь нажимает кнопку.

Как и в обычных языках программирования, переменные используются для хранения значений. В CSS они обычно используются для хранения цветов, названий шрифтов, размеров шрифтов, единиц и т. д. Затем на них можно ссылать и повторно использовать в нескольких местах в таблице стилей. Большинство разработчиков используют термин «переменные CSS», но официальное название — это пользовательские свойства.

Пользовательские свойства CSS позволяют изменять переменные, на которые можно ссылаться в таблице стилей. Раньше это было возможно только с помощью препроцессоров CSS, таких как Sass.

Root и var()

Прежде чем создать наш пример динамической темы, давайте разберемся с основами пользовательских свойств. Пользовательское свойство — это свойство, имя которого начинается с двух дефисов (—), например, —foo. Они определяют переменные, на которые можно ссылаться, используя var(). Рассмотрим этот пример:

Определение пользовательских свойств в селекторе :root означает, что они доступны в глобальном пространстве документа для всех элементов. :root — это псевдо-класс CSS, который соответствует корневому элементу документа — элементу html. Это похоже на селектор html, но с более высокой специфичностью.

Вы можете получить доступ к значению пользовательского свойства :root в любом месте документа:

Вы также можете включить с переменной CSS резервное значение. Например:

Если пользовательское свойство не определено, вместо него используется резервное значение. Определение пользовательских свойств внутри селектора CSS, отличного от селектора :root или html, делает переменную доступной для соответствия элементам и их дочерним элементам.

Пользовательские свойства CSS и переменные препроцессора

Препроцессоры CSS, такие как Sass, часто используются для поддержки веб-разработки в интерфейсе. Среди других полезных функций препроцессоров они используют переменные. Но в чем разница между переменными Sass и пользовательскими свойствами CSS?

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

Пользовательские свойства могут быть доступны и изменены через JavaScript. Переменные препроцессора компилируются один раз, и только конечное значение доступно в клиенте.

Написание простой HTML-страницы

Начнем с создания папки для нашего проекта:

Затем добавьте в папку проекта файл index.html:

Добавьте в него следующий код:

Мы добавляем с помощью тега nav панель навигации, футер, div контейнера, который содержит кнопку (она будет использоваться для переключения между светлой и темной темами) и некоторый условный текст Lorem Ipsum.

Написание базового CSS для нашей HTML-страницы

Теперь давайте создадим нашу страницу. В том же файле, используя в head встроенный тег style, добавьте следующие стили CSS:

Для определения цветов используется обозначение CSS3 HSL (оттенок, насыщенность, яркость). Оттенок — это угол в окружности цветов, в нашем примере используется 350 для красного цвета. Все цвета страницы используют разные вариации, в которых изменяются сочетания насыщенности (процентное соотношение цвета) и яркости (в процентах).

Использование HSL позволяет нам легко пробовать для темы различные базовые цвета, изменяя только значение оттенка. Мы могли бы также использовать переменную CSS для значения оттенка и переключать цвет темы, изменяя одно значение в таблице стилей или динамически изменяя его с помощью JavaScript. Это скриншот страницы:

Pseudo-classes

Посмотрите соответствующую демо-версию:

Давайте используем переменную CSS для хранения значения оттенка всех цветов страницы. Добавьте глобальную переменную CSS в селектор :root в верхней части тега style:

Затем мы заменяем все жестко закодированные значения 350 в цветах hsl() на переменную —main-hue. Например, это селектор nav:

Теперь, если вы хотите указать любой цвет, отличный от красного, вы можете просто присвоить соответствующее значение —main-hue. Вот несколько примеров:

Мы определяем три пользовательских свойства для красного, синего и зеленого цветов, а затем присваиваем переменную —red-hue в качестве значения переменной —main-hue. Это скриншот страниц с разными значениями —main-hue:

Pseudo-classes

Пользовательские свойства CSS дают нам несколько преимуществ:

Значение может быть определено в одном месте.

Это значение можно назвать соответствующим образом, чтобы облегчить поддержку кода.

Значение может быть динамически изменено с использованием JavaScript. Например, для —main-hue может быть установлено любое значение от 0 до 360.

Используя JavaScript для динамического задания значения —main-hue из набора предопределенных значений или пользовательского значения для оттенка (оно должно быть от 0 до 360), мы можем предоставить пользователю множество возможностей для настройки темы.

Следующая строка кода установит для —main-hue значение 240 (синий):

Посмотрите следующую демо-версию, в которой показан полный пример, в нем вы можете динамически переключаться между темами красного, синего и зеленого цветов:

Pseudo-classes

Добавление темной темы CSS

Теперь давайте создадим темную тему для этой страницы. Для большего контроля над цветами разных объектов нам нужно добавить больше переменных.

Просматривая стили страницы, мы можем заменить все цвета HSL в разных селекторах переменными после определения пользовательских свойств для соответствующих цветов в :root:

Здесь были использованы соответствующие имена для пользовательских свойств. Например, —nav-bg-color относится к цвету фона панели навигации, а —nav-text-color относится к цвету переднего плана / текста панели навигации. Теперь продублируйте селектор :root с его содержимым, но добавьте атрибут темы со значением dark:

Эта тема будет активирована, если к элементу html будет добавлен атрибут темы со значением dark.

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

Фильтр invert() инвертирует все цвета в выбранных элементах (каждый элемент в этом случае). Значение инверсии может быть указано в процентах или числом. Значение 100% или 1 полностью инвертирует значения оттенка, насыщенности и яркости элемента.

Фильтр brightness() делает элемент ярче или темнее. Значение 0 дает полностью темный элемент. Фильтр invert() делает некоторые элементы очень яркими. Они смягчаются установкой brightness(0.6). Темная тема с разной степенью затемнения:

Pseudo-classes

Переключение тем с помощью JavaScript

Давайте теперь используем JavaScript для переключения между темными и светлыми темами, когда пользователь нажимает кнопку Dark/Light. В index.html добавьте встроенный script перед закрытием body со следующим кодом:

Document.documentElement относится к корневому элементу DOM документа, то есть html. Этот код проверяет наличие атрибута theme с помощью метода .hasAttribute() и добавляет атрибут со значением dark, если он не существует, что приводит к переключению на темную тему. В противном случае он удаляет атрибут, что приводит к переключению на светлую тему.

Дополнительно:  Root шарики

Изменение пользовательских свойств CSS с помощью JavaScript

Используя JavaScript, мы можем получить доступ к пользовательским свойствам и динамически изменять их значения. В нашем примере мы жестко закодировали значение яркости, но это можно изменить динамически. Сначала добавьте в HTML-страницу элемент ввода ползунок ниже кнопки dark/light:

Определите для фильтра brightness это пользовательское свойство вместо жестко заданного значения:

Наконец, добавьте следующий код, чтобы синхронизировать значение —theme-darkness со значением ползунка:

Мы прослушиваем событие изменения ползунка и устанавливаем значение —theme-darkness, используя метод setProperty(). Мы также можем применить фильтр brightness к светлой теме. Добавьте пользовательское свойство —theme-darkness в верхней части селектора :root:

Затем добавьте фильтр brightness в нижней части этого же селектора:

Код этого примера вы можете найти в следующей демо-версии:

Вот скриншот темной темы из последнего примера:

Pseudo-classes

Вот скриншот светлой темы:

Pseudo-classes

Заключение

В этой статье мы рассмотрели, как использовать пользовательские свойства CSS для создания тем и динамического переключения между ними. Мы использовали цветовую схему HSL, которая позволяет указывать цвета с оттенками, насыщенностью и яркостью, а также фильтры CSS (invert и brightness), чтобы создать темную версию светлой темы.

В CSS псевдокласс :root нужен для выбора родительского элемента высшего уровня согласно действующей спецификации. Для HTML-документа :root соответствует селектору html.

В коде представленном ниже стили для :root и html имеют одинаковый смысл:

Выше мы уже упомянули, что псевдокласс :root по своей значимости эквивалентен селектору html. Но, на самом деле, в CSS :root более значим, чем html, так как он является псевдоклассом (подобно :first-child или :hover). Селекторы псевдоклассов имеют больший вес и более высокую специфичность, чем селекторы тегов.

Например, в коде:

Несмотря на то, что селектор html следует в документе последним, стили для :root одерживают верх, благодаря более высокой специфичности.

Иные спецификации

В спецификации HTML :root относится к родителю самого высокого уровня, которым является html.

Так как CSS может использоваться для SVG и XML, в таких документах так же можно применять псевдокласс :root, но он будет относиться уже к другим селекторам.

Например, в SVG родителем высшего порядка является тег svg:

Как и в HTML, в примере, приведенном выше, стили для :root и svg будут выполнять одни и те же действия, :root, при этом, будет обладать более высокой специфичностью.

Так для чего же нужен :root в повседневной работе. Как мы заметили ранее, этот псевдокласс является эквивалентом селектора html. А это означает, что с помощью стилей для селектора :root можно делать все, что мы делаем в отношении селектора html:

При желании, Вы можете применить пользовательские свойства и создать глобальные переменные для CSS-кода своего проекта:

Возможность стилизовать SVG-графику — еще один плюс использования :root вместо html:

Дополнительную информациию о псевдоклассе :root можно получить на сайте MDN.

Спасибо за внимание.

CSS псевдо-класс это ключевое слово добавляется к селектору , который определяет особое состояние выбранного элемента (ов). Например :hover можно использовать для изменения цвета кнопки при наведении на нее указателя пользователя.

Псевдоклассы позволяют применять стиль к элементу не только в отношении содержимого дерева документа, но также в отношении внешних факторов, таких как история навигатора ( например, :visited ), состояние его содержимого ( like :checked на определенных элементах формы) или положение мыши (например :hover , которое позволяет узнать, находится ли мышь над элементом или нет).

Примечание. В отличие от псевдоклассов, псевдоэлементы могут использоваться для стилизации определенной части элемента.

Псевдоклассы состояния отображения элементов

Эти псевдоклассы позволяют выбирать элементы на основе их состояния отображения.

Сопоставляет элемент,который в настоящее время находится в полноэкранном режиме.

Сопоставляет элемент,находящийся в состоянии,в котором он исключает любое взаимодействие с элементами вне его,пока взаимодействие не будет прекращено.

Сопоставляет элемент,который в настоящее время находится в режиме «картинка в картинке».

Эти псевдоклассы относятся к элементам формы и позволяют выбирать элементы на основе атрибутов HTML и состояния,в котором находится поле до и после взаимодействия.

Представляет элемент пользовательского интерфейса,который находится во включенном состоянии.

Представляет элемент пользовательского интерфейса,который находится в отключенном состоянии.

Представляет собой любой элемент,который не может быть изменен пользователем.

Представляет собой любой элемент,который может быть изменен пользователем.

Сопоставляет один или несколько элементов пользовательского интерфейса,которые используются по умолчанию среди набора элементов.

Совпадает,когда такие элементы,как флажки и радиокнопки,включены.

Сопоставляет элементы пользовательского интерфейса,когда они находятся в неопределенном состоянии.

Сопоставляет элемент пользовательского ввода,который пуст,содержит пустую строку или другой нулевой ввод.

Сопоставляет элемент с допустимым содержимым.Например,элемент ввода с типом ’email’,который содержит правильно сформированный адрес электронной почты или пустое значение,если элемент управления не требуется.

Сопоставляет элемент с недопустимым содержимым.Например,элемент ввода с типом ’email’ с введенным именем.

Применяется к элементам с ограничениями диапазона.Например,элемент управления ползунком,когда выбранное значение находится в допустимом диапазоне.

Применяется к элементам с ограничениями диапазона.Например,элемент управления ползунком,когда выбранное значение находится за пределами допустимого диапазона.

Сопоставляет,когда требуется элемент формы.

Сопоставляет,когда элемент формы является необязательным.

Представляет элемент с неправильным вводом,но только когда пользователь взаимодействует с ним.

Эти псевдоклассы отражают язык документа и позволяют выбирать элементы на основе направления языка или сценария.

Псевдокласс направленности выбирает элемент на основе его направленности,определяемой языком документа.

Выберите элемент на основе языка его содержимого.

Эти псевдоклассы относятся к ссылкам и к целевым элементам в текущем документе.

Соответствует элементу, если элемент соответствует либо :link , либо :visited .

Сопоставляет ссылки,которые еще не были посещены.

Сопоставляет ссылки,которые были посещены.

Подбирает ссылки,абсолютный URL которых совпадает с целевым URL.Например,якорные ссылки на одну и ту же страницу.

Сопоставляет элемент,который является целью URL документа.

Подбирает элементы,которые являются целью URL документа,а также элементы,у которых есть потомок,являющийся целью URL документа.

Представляет элементы,которые являются точкой отсчета для селекторов.

Псевдоклассы состояния ресурсов

Эти псевдоклассы применяются к медиа,которое способно находиться в состоянии,когда его можно описать как воспроизведение,например,видео.

Представляет медиаэлемент,который способен воспроизводиться,когда этот элемент воспроизводится.

Представляет медиаэлемент,который способен воспроизводиться,когда этот элемент приостановлен.

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

Представляет элемент или предок элемента,который отображается.

Представляет элемент, который находится полностью перед элементом :current .

Представляет элемент, который полностью следует за элементом :current .

Эти псевдоклассы относятся к расположению элемента в дереве документа.

Представляет элемент,у которого нет дочерних элементов,кроме символов пробела.

Использует нотацию An+B для выбора элементов из списка одноуровневых элементов.

Использует нотацию An+B для выбора элементов из списка одноуровневых элементов, считая в обратном порядке от конца списка.

Сопоставляет элемент,который является первым среди своих братьев и сестер.

Сопоставляет элемент,который является последним среди своих братьев и сестер.

Сопоставляет элемент,у которого нет братьев и сестер.Например,элемент списка,в котором нет других элементов списка.

Использует нотацию An+B для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу из списка одноуровневых элементов.

Использует нотацию An+B для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу из списка одноуровневых элементов, считая в обратном порядке от конца списка.

Сопоставляет элемент,который является первым среди своих братьев и сестер,а также соответствует определенному селектору типа.

Сопоставляет элемент,который является последним среди своих братьев и сестер,а также соответствует определенному селектору типа.

Сопоставляет элемент,у которого нет братьев и сестер выбранного селектора типа.

Псевдоклассы действий пользователя

Для применения этих псевдоклассов требуется определенное взаимодействие с пользователем,например,наведение указателя мыши на элемент.

Совпадает,когда пользователь указывает на элемент с помощью указательного устройства,например,удерживая указатель мыши над элементом.

Соответствует моменту,когда элемент активируется пользователем.Например,когда элемент нажимается.

Совпадает,когда элемент имеет фокус.

Совпадает,когда элемент имеет фокус и агент пользователя определяет,что элемент должен быть заметно сфокусирован.

Соответствует элементу, к которому применяется :focus , а также любому элементу, у которого есть потомок, к которому применяется :focus .

Как и на обычных занятиях,вы можете объединять в цепочку столько псевдо-классов,сколько захотите в селекторе.

Then your web browser can apply these styles to your entire web page, keep reading to level up your CSS coding skills with CSS root.

Root CSS?

For now, let’s turn our attention to some usefulness of CSS :root.

Uses of CSS

CSS :root simplifies the styling of your web pages. That is because when you need a global style for your web page, you can write them in CSS :root. Moreover, when you need to update these styles, you can update them at a single location, in the CSS :root. Doing so, it prevents code repetitions and simplifies maintenance.

With that been said, we’ve outlined below some use cases where CSS :root is of great service.

– Declare Global CSS Variables

You can write variables in CSS within the declarations of CSS :root. Afterward, you can use the variables in other places in your stylesheet. You do this via the CSS var() function, if you’d like, you can change the value of that variable at that point of calling. When you need to update this variable value, make the changes at CSS :root. Other CSS rules using the variables will pick up the changes.

– Set Background Color of the Web Page

With CSS :root, you can animate the web page background via CSS :hover pseudo-class. First, set the background color in CSS :root. Further, you can set the CSS transition property to the background color, by ensure the transition has a specified time frame. Lastly, attach a CSS :hover pseudo-class to CSS :root.

The CSS :hover pseudo-class should have styles that change the background color. Our next code contains code that implements animate your web page on hover.

– Place Content Before the <Head> Element

The root font size determines the font size of the remaining element on your web page, which by default is 16 pixels in size. An increase to 16 pixels, via CSS, will cause an increase in the font size on your web page, this is what we did in our next code example. This is another showcase of what you can do with CSS :root.

– Deploy Responsive Base Font

With CSS :root, you can deploy a responsive font. This font will adjust its font size based on your web browser’s viewport, however, to achieve font responsiveness, you’ll change the root font size based on the viewport. Furthermore, this means you’ll need a CSS media query.

CSS :root has a higher specificity than its companion html selector in CSS, though both are identical, specificity sets them apart. There is no better way to prove this than a code example, as we find out.

In our next code, the CSS to be exact, we set the web page background color via CSS :root and the html selector in CSS. As you run the code in your web browser, your web browser will apply the background color in CSS :root. As a result, the web page will have a blue background color.

Дополнительно:  Project Arrhythmia General Discussions

Other web page elements will inherit certain properties from CSS :root, an example of such a property is CSS font-size. In our next code example, the paragraph text has a computed font size of 19.2 pixels. The web browser arrives at this value after the multiplication of CSS :root font size and 16.

Web Browser Support

All web browsers support CSS :root.

We’ve come a long way with CSS :root. You’ve learned the workings of CSS :root and when you can use it. Below, we present you with the full summary of everything that we’ve taught you in this article:

Pseudo-classes

Your Go-To Resource for Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL. Meet The Team

CSS pseudo-classes and pseudo-elements can certainly be a handful. They provide so many possibilities that one can easily feel overwhelmed, but that’s the life of a web designer and developer! This guide will help you to learn about all the things you need to keep in mind so that your pseudo-classes and pseudo-elements are well implemented.

Hola a todos! (Hello, everyone!)

In my early days of web design, I had to learn things the hard way: trial and error. There was no Smashing Magazine, Can I Use, CodePen or any of the other amazing tools at our disposal today. Having someone show me the ropes of web design, especially on the CSS front, would have been incredibly helpful.

If you’re an experienced web designer or developer, you must know and have used most of the pseudo-classes and pseudo-elements discussed here. However, I encourage you to check the table of contents; you might not have heard of one or two of them before.

Before diving into the meat and bones, and because this article is about pseudo-classes and pseudo-elements, let’s start with the basics: Have you ever wondered what the word “pseudo” means? If so, here’s a definition from Dictionary.com:

1. not actually but having the appearance of; pretended; false or spurious; sham.

2. almost, approaching, or trying to be.

Without getting overcomplicated with the W3C’s technical definition, a pseudo-class is basically a phantom state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are :link, :visited, :hover, :active, :first-child and :nth-child. There are more, and we’re going to see them all in a minute.

Also, pseudo-classes are always preceded by a colon (:). Then comes the name of the pseudo-class and sometimes a value in parentheses. :nth-child anyone?

Now, pseudo-elements are like virtual elements that we can treat as regular HTML elements. The thing is that they don’t exist in the document tree or DOM. This means we don’t actually type the pseudo-elements, but rather create them with CSS.

A few common pseudo-elements are :after, :before and :first-letter. We’ll talk about them towards the end of this article.

More after jump! Continue reading below ↓

Single Or Double Colon For Pseudo-Elements?

The short answer is, in most cases, either.

The double colon (::) was introduced in CSS3 to differentiate pseudo-elements such as ::before and ::after from pseudo-classes such as :hover and :active. All browsers support double colons for pseudo-elements except Internet Explorer (IE) 8 and below.

Some pseudo-elements, such as ::backdrop, accept only a double colon, though.

Personally, I use single-colon notation so that my CSS is backwards-compatible with legacy browsers. I use double-colon notation on those pseudo-elements that require it, of course.

You are free to use either; there is really no right or wrong about this.

However, the specification, at the time of writing this article, does recommend using single-colon notation for the reason mentioned above, backwards compatibility:

In the headings in this article, pseudo-elements that support both a single and double colon will be shown with both notations. Pseudo-elements that support only a double colon will be shown as is.

When (Not) To Use CSS Generated Content

Generating content via CSS is achieved by combining the content CSS property with the :before or :after pseudo-element.

This “content” may be either plain text or a container that we manipulate with CSS to display a graphic shape or decorative element. Here, I’ll be referring to the first type of content, text.

Use CSS generated content for decoration and non-vital information, but make sure it’s properly handled by screen readers, so that people with assistive technology are not distracted. Think “progressive enhancement” when deciding whether to use CSS generated content.

Here on Smashing Magazine, Gabriele Romanato has an awesome article about using CSS generated content.

Experimental Pseudo-Classes And Pseudo-Elements

A pseudo-class or pseudo-element that is experimental means that its specification is not stable or finalized. The syntax and behavior could change down the road.

However, we might be able to use experimental pseudo-classes and pseudo-elements now by applying vendor prefixes. To do this, refer to Can I Use; and some kind of auto-prefixing tool, such as -prefix-free or Autoprefixer, is a must.

In this article, you will see an “experimental” label next to a relevant pseudo-class or pseudo-element’s name.

### Table of Contents (in alphabetical order)

All right, everyone, let’s get this show started!

We’ll begin our discussion of pseudo-classes with those relating to states.

States

Let’s check them out.

The :link pseudo-class represents the “normal” state of links and is used to select links that have not yet been visited. Declaring the :link pseudo-class before all other pseudo-classes in this category is recommended. The order of all four is this: :link, :visited, :hover, :active

Visited

The :visited pseudo-class is used in links that have been visited. Position :visited pseudo-class second in order (after the :link pseudo-class).

Hover

It should appear third in order (after the :visited pseudo-class).

Active

The :active pseudo-class is used to style an element that has been “activated” either by a pointing device or by a tap on a touchscreen device. It can also be triggered by the keyboard, just like the :focus pseudo-class.

It works very similarly to :focus, the difference being that the :active pseudo-class is an event that occurs between the mouse button being clicked and being released.

It should appear fourth in order (after the :hover pseudo-class).

Focus

The :focus pseudo-class is used to style an element that has gained focus via a pointing device, from a tap on a touchscreen device or via the keyboard. It’s used a lot in form elements.

If you work with CSS preprocessors, such as Sass, this bonus content might interest you.

(If you’re not into CSS preprocessors — and that’s OK — you can skip to the section on structural pseudo-classes.)

In the spirit of optimizing our workflow, below is a Sass mixin that we can use to create a basic set of links.

The idea behind this mixin is that no defaults are declared in the arguments. So, we are “forced,” in a friendly way, to declare all four states of our links.

The :focus and :active pseudo-classes are usually declared together. Feel free to separate them if you prefer.

Note that this mixin can be applied to any HTML element, not just links.

Here is our mixin:

Structural

Structural pseudo-classes target additional information in the document tree or DOM and cannot be represented by another type of selectors or combinators.

First-child

The :first-child pseudo-class represents the first child of its parent element.

First-of-type

The :first-of-type pseudo-class represents the first element of its kind in its parent container.

Last-child

The :last-child pseudo-class represents the last child element in its parent container.

Last-of-type

The :last-of-type pseudo-class represents the last element of its kind in its parent container.

The :not pseudo-class is also known as the negation pseudo-class. It accepts an argument — basically, another “selector” — inside parentheses. The argument can actually be another pseudo-class.

It may be chained but may not contain another :not selector.

Now, we’re going to chain two :not pseudo-classes. All elements will have black text and a yellow background, except the li element with the class .first-item and the last li element in the list:

Nth-child

The :nth-child pseudo-class targets one or more elements depending on their order in the markup.

This pseudo-class is one of the most versatile and robust pseudo-classes in CSS.

All of the :nth pseudo-classes take an argument, which is a formula that we type in parentheses. The formula may be a single integer, a formula structured as an+b or the keyword odd or even.

In the an+b formula:

Let’s select the second child. So, only “Beta” will be orange:

Now, let’s select every other child starting from the second. So, “Beta,” “Delta,” “Zeta,” “Theta” and “Kappa” will be orange:

Let’s select all even-numbered children:

Let’s select every other child, starting from the sixth. So, “Zeta,” “Theta” and “Kappa” will be orange:

Nth-last-child

The :nth-last-child pseudo-class basically works the same as :nth-child except that it selects elements starting from the end, rather than the beginning.

Let’s select the second child, starting from the end. So, only “Iota” will be orange:

Now, let’s select every other child, starting with the second from the end. So, “Iota,” “Eta,” “Epsilon,” “Gamma” and “Alpha” will be orange:

Let’s select all even children, starting from the end:

Let’s select every other child, starting with the sixth element from the end. So, “Epsilon,” “Gamma” and “Alpha” will be orange:

Nth-of-type

The :nth-of-type pseudo-class works basically the same as :nth-child, the main difference being that it’s more specific because we’re targeting a specific element relative to like elements contained within the same parent element.

Nth-last-of-type

The :nth-last-of-type pseudo-class works the same as :nth-of-type, the difference being that it starts counting from the end of the list, rather than the beginning.

Refer to these two great resources when working with the :nth pseudo-classes:

Only-child

The :only-child pseudo-class targets the only child of a parent element.

Only-of-type

The :only-of-type pseudo-class targets an element that has no siblings of that particular type. This is similar to :only-child except that we can target a specific element and make the selector more meaningful.

Target

Tip: You can use the background: shorthand instead of background-color: to achieve the same result.

Validation

Forms have always been the bane of web design and development. With the help of validation pseudo-classes, we can make the process of filling out forms a smoother and more pleasant experience.

Дополнительно:  Как получить бесплатный root-доступ для устройства Android без использования компьютера?

Note, however, that although most of the pseudo-classes listed in this section work well with form elements, some pseudo-classes can be used with other HTML elements, too.

Let’s check out these pseudo-classes!

Checked

The :checked pseudo-class targets radio buttons, checkboxes and option elements that have been checked or selected.

Default

The :default pseudo-class targets the default element in a form among a group of similar elements.

In case you need to target the default button in a form that does not have a class, you can use the :default pseudo-class.

Disabled

The :disabled pseudo-class targets a form element in the disabled state. An element in a disabled state can’t be selected, checked or activated or gain focus.

Tip: Using disabled=»disabled» in the markup isn’t required. You can accomplish the same result using only the attribute disabled. Keep in mind, though, that using disabled=»disabled» is required in XHTML.

Empty

The :empty pseudo-class targets elements that have no content in them of any kind at all. If an element has a letter, another HTML element or even a space, then that element would not be empty.

Here is what is considered empty and not empty:

Enabled

The :enabled pseudo-class targets elements that are enabled. All form elements are enabled by default — that is, until we add the disabled attribute to the element in the markup.

Tip: Using enabled=»enabled» in the markup isn’t required. You can accomplish the same result using only the enabled attribute. Keep in mind, though, that enabled=»enabled» is required in XHTML.

The :in-range pseudo-class targets elements that have a range and whose values are within the defined range.

Out-of-range

The :out-of-range pseudo-class targets elements that have a range and whose values fall outside of the defined range.

Indeterminate

The :indeterminate pseudo-class targets input elements such as radio buttons and check boxes that are not selected or that are unselected upon the page loading.

An example of this is when a page loads with a group of radio buttons and no default or preselected radio button has been set, or when a checkbox has been given the indeterminate state via JavaScript.

The :valid pseudo-class targets a form element whose formatting is correct according to that element’s required format.

Invalid

The :invalid pseudo-class targets a form element whose formatting is not correct according to that element’s required format.

Optional

The :optional pseudo-class targets input fields that are not required in a form. In other words, as long as an input doesn’t have the required attribute, it can be targeted with the :optional pseudo-class.

Read-only

This would be useful, for example, in a form where we need to show pre-populated information that cannot be altered but that still needs to be displayed within the form element for submission purposes.

Read-write

This pseudo-class can be combined with the :focus pseudo-class to enhance the UX in certain situations.

Required

The :required pseudo-class targets input elements that have the required HTML attribute.

In addition to relying on the traditional asterisk (*) on an input element’s label to denote that it is required, we could also style the field with CSS. Basically, we get the best of both worlds.

Scope (Experimental)

The :scope pseudo-class makes most sense when it’s tied to the scoped HTML attribute in a style tag.

If there is no scoped attribute in a style tag within a section of the page, then the :scope pseudo-class will traverse all the way up to the html element, which is basically the default scope of a style sheet.

HTML and CSS:

Language

Language pseudo-classes relate to the text contained on the page. They do not target any media such as images or video.

Dir (Experimental)

The :dir pseudo-class targets an element whose directionality is specified in the document. In other words, in order for the :dir pseudo-class to work, we need to specify the directionality of the relevant element in the markup with the dir HTML attribute.

Two directions are currently available and supported: ltr (left to right) and rtl (right to left).

Note: Combining the prefixed and unprefixed versions in a single rule won’t work. We need to create two separate rules.

The :lang pseudo-class matches the language of an element as determined by a combination of the lang=»» HTML attribute, the corresponding meta element and information gleaned from the protocol, such as an HTTP header.

The lang=»» HTML attribute is commonly used in the html tag, but it can also be used in any other tag if needed.

Depending on your circumstance, this may or may not be OK, because there are differences between the default quotation marks added by a browser’s UA and the commonly used quotation marks added via CSS.

For example, German (de) quotation marks added by a browser’s UA look like this:

„Lorem ipsum dolor sit amet.“

However, in most examples found on the web where quotations marks are declared via CSS, German quotation marks look like this:

»Lorem ipsum dolor sit amet.«

Both are actually correct. So, you’ll have to decide whether to let the UA add the quotation marks or to add them yourself via CSS using the :lang pseudo-class and the quotes CSS property.

Let’s add quotation marks with CSS.

Miscellaneous

Let’s explore some pseudo-classes with other functionality.

The :root pseudo-class refers to the highest parent element in a document.

In virtually all cases, the :root pseudo-class will refer to the html element in an HTML document. However, it could refer to a different element if it’s used in another markup language, such as SVG or XML.

Let’s add a solid background color to the html element, the highest parent element in an HTML document:

Note: We could have accomplished the same effect if we had used html as the selector. However, :root, like a class, has a higher specificity than an element selector (in this case, html).

Fullscreen (Experimental)

The :fullscreen pseudo-class targets elements that are displayed in full-screen mode.

The way to tell whether we have entered full-screen mode is when a message appears at the top of the browser telling us so and when pressing the Escape key takes us back to the normal page. We see this when maximizing a video in YouTube or Vimeo, for example.

If you plan to use the :fullscreen pseudo-class, keep in mind that browsers style things very differently. Plus, you will have to deal with browser prefixes not only in the CSS, but also in your JavaScript. I recommend using Hernan Rajchert’s screenfull.js, which irons out most browser quirks.

The Fullscreen API is beyond the scope of this article, but here’s a snippet that will work in WebKit and Blink browsers.

As mentioned at the beginning of this article, pseudo-elements are like virtual elements that we can treat like regular HTML elements. They don’t exist in the document tree or DOM, which means we don’t actually type pseudo-elements in the HTML, but rather create them with CSS.

Also, the double colon (::) and single colon (:) difference is merely a visual distinction between CSS 2.1 and CSS3 pseudo-elements. You are free to use either.

Before/

The :before pseudo-element, like its sibling :after, adds content (text or a shape) to another HTML element. Again, this content is not actually present in the DOM but can be manipulated as if it were. And the content property needs to be declared in the CSS.

Remember that text added with this pseudo-element cannot be selected.

This will render like so:

Note: See the space after the word “Hello ”? Yes, spaces are taken into account.

After/

The :after pseudo-element is used to add content (either text or a shape) to another HTML element. This content is not actually present in the DOM, but it can be manipulated as if it were. In order for it to work, the content property needs to be declared in the CSS.

Note that any text added with this pseudo-class cannot be selected.

Ricardo, Web Designer!

Backdrop (Experimental)

The ::backdrop pseudo-element is a box that is generated behind the full-screen element but that sits above all other content. It’s used in combination with the :fullscreen pseudo-class to change the background color of a maximized screen — in case you don’t want to go with the default black.

Note: The ::backdrop pseudo-element requires a double colon; it doesn’t work with a single colon.

Let’s continue our example from the :fullscreen pseudo-class.

First-letter/

The :first-letter pseudo-element selects the first letter in a line of text.

If an element is included before that line, such as an image, video or table, then the first letter is not affected and can still be selected.

This is a great feature to use in paragraphs, for example, to enhance typographic appeal, without having to resort to an image or external assets.

Tip: For text generated with the :before pseudo-element, the first letter of that text will be targeted, even though it is not present in the DOM.

First-line/

When used in a paragraph, for example, only the first line of that paragraph will be styled, even if the text wraps.

Selection

The ::selection pseudo-element is used to style the portion of a document that has been highlighted.

Until further notice, Gecko-based browsers required the prefixed version: ::-moz-selection.

Placeholder (Experimental)

The ::placeholder pseudo-element targets placeholder text used in form elements via the placeholder HTML attribute.

It can also be written as ::input-placeholder, which is actually the syntax used in CSS.

Note: This pseudo-element is not a part of the standard and its implementation will very likely change in future, so use with caution.

Conclusion

Phew! That was something, eh?

CSS pseudo-classes and pseudo-elements are certainly a handful, aren’t they? They provide so many possibilities that one can easily feel overwhelmed, for sure. But that’s the life of a web designer and developer.

Make sure to test thoroughly. Well implemented pseudo-classes and pseudo-elements go a long way.

I hope you’ve enjoyed this extensive reference article as much as I did writing it. And don’t forget to bookmark it!

Thank you for reading! Hasta la próxima! (Until next time!)

On SmashingMag

(ml, vf, al, il)

Оцените статью
Master Hi-technology
Добавить комментарий