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

Содержание

Полное руководство по псевдоклассам и псевдоэлементам

Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen и прочих волшебных вещей, окружающих нас сегодня. Если бы раньше кто-либо показал мне азы веб дизайна, особенно по части CSS, это было бы невероятно полезно.

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

Если вы опытный веб-дизайнер или разработчик, то вы должны знать большинство обсуждаемых здесь псевдоклассов и псевдоэлементов. Однако я рекомендую вам ознакомиться с содержанием, возможно, вы встретите что-то незнакомое для себя.

Перед тем как погрузиться в вопрос, разберемся с терминами — если в названии есть псевдоклассы и псевдоэлементы, то что значит часть слова “псевдо”? Вот что говорит dictionary.com:

прилагательное 1. Ненастоящий, но похожий внешне; притворяющийся; ложный или мнимый 2. Почти такой же или пытающийся быть таким же

Не перегружаясь техническим определением W3C, псевдокласс можно определить, как фантомное состояние или специфическую характеристику элемента, которая может быть выделена с помощью CSS. Наиболее распространенные псевдоклассы это :link , :visited , :hover , :active , :first-child и :nth-child . Существуют и другие псевдоклассы, им мы тоже уделим внимание.

Псевдоклассы в стилях всегда выделяются предшествующим двоеточием ( : ), затем идет название псевдокласса и иногда значение в скобках.

Псевдоэлементы похожи на виртуальные элементы, которые мы можем обрабатывать как обычные HTML-элементы. Но они не существуют в дереве документа или в DOM, мы создаем их с помощью CSS.

Наиболее распространенные псевдоэлементы это :after , :before и :first-letter , мы рассмотрим их в конце статьи.

Одно или два двоеточия ставить перед псевдоэлементами?

Короткий ответ для большинства случаев — без разницы.

Двойное двоеточие ( :: ) было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа ::before и ::after от псевдоклассов, таких как :hover и :active . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.

При этом некоторые псевдоэлементы, например, ::backdrop работают только с двойным двоеточием.

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

Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.

Однако спецификация на момент написания статьи рекомендует использовать одно двоеточие, по уже упомянутой здесь причине — обратной совместимости.

Не забывайте, что в CSS3 псевдоэлементы выделяются двойным двоеточием, типа a::after < … >, для их отличия от псевдоклассов. Вы можете иногда это видеть в CSS. При этом CSS3 также позволяет использовать одно двоеточие ради обратной совместимости и в настоящее время мы рекомендуем придерживаться этого синтаксиса.

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

Когда использовать и не использовать генерируемый контент в CSS

Генерируемый контент в CSS реализуется с помощью комбинации свойства content с псевдоэлементами :before или :after .

Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент. Здесь я буду говорить о первом типе контента — тексте.

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

  • Он будет недоступен скрин-ридерам;
  • Он будет невыделяем;
  • Если генерируемый контент использует излишнее содержание для украшения, скрин-ридеры будут читать его, что ухудшит впечатления пользователей.

Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.

На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.

Экспериментальные псевдоклассы и псевдоэлементы

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

Однако мы можем использовать экспериментальные псевдоклассы и псевдоэлементы с помощью вендорных префиксов; о поддержке вы можете узнать с помощью Can I Use, а для удобства работы есть такие инструменты как -prefix-free или Autoprefixer.

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

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

Мы начнем с псевдоклассов для определенных состояний.

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

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

Итак, рассмотрим их.

Псевдокласс :link представляет нормальное состояние ссылок и используется для выделения ссылок, которые до сих пор не посещены. В стилях рекомендуется объявлять этот псевдокласс перед всеми остальными классами этой категории. Полный порядок псевдоклассов такой: :link , :visited , :hover и :active .

Этот псевдокласс можно пропустить:

:visited

Псевдокласс :visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса :link :

:hover

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

:active

Псевдокласс :active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом :focus .

Он и работает аналогично :focus , с единственной разницей, что псевдокласс :active фиксирует событие между нажатием и отпусканием клавиши мыши.

Оно следует четвертым в стилях (после :hover ).

:focus

Псевдокласс :focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.

Бонус: миксин Sass для ссылок

Если вы используете препроцессоры CSS, типа Sass, этот раздел должен заинтересовать вас. Если вы их не используете (не бойтесь, это нормально), вы можете пропустить его.

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

Идея миксина состоит в отсутствии настроек по умолчанию в качестве аргументов, мы просто декларируем все 4 состояния ссылок.

Псевдоклассы :focus и :active обычно декларируются вместе, но при желании вы можете разделить их.

Учтите, этот миксин может быть применен к любому элементу HTML, не только к ссылкам. Вот он:

Структурные псевдоклассы

Структурные псевдоклассы направлены на дополнительные данные в дереве документа или DOM и не могут быть заменены другим типом селекторов или их комбинацией.

:first-child

Псевдокласс :first-child выделяет элемент, который является первым потомком своего родительского элемента.

В следующем примере только первый элемент li будет выделен оранжевым текстом.

:first-of-type

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

В следующем примере первый элемент li и первый элемент span будут выделены оранжевым цветом.

:last-child

Псевдокласс :last-child выделяет элемент, которыя является последним дочерним элементом в родительском контейнере.

В следующем примере, последний элемент li будет выделен оранжевым цветом.

:last-of-type

Псевдокласс :last-of-type выделяет последний элемент своего типа в родительском контейнере.

В следующем примере, текст в последнем li и последнем span будет оранжевым.

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

В следующем примере, псевдокласс :not выберет все элементы, не подпадающее под селектор-аргумент. Оранжевым будет весь текст, кроме элемента li с классом .first-item :

Теперь попробуем сделать цепочку из двух псевдоклассов :not . У всех элементов будет черный цвет и желтый фон, кроме элемента li с классом .first-item и последнего li в списке.

Демо

:nth-child

Псевдокласс :nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.

Это один из самых универсальных и надежных псевдоклассов в CSS.

Все псевдоклассы :nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .

  • a это целое число;
  • n это литерал (т.е. мы просто используем букву n внутри формулы);
  • + это оператор (это может быть как + , так и — );
  • b это целое число, используемое только при использовании оператора.

Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:

Выделим второй элемент в списке, только “Beta” будет оранжевой:

Теперь выделим все элементы с порядковыми номерами, кратными двум. Оранжевыми будут “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa”:

Те же самые четные элементы можно выделить и с помощью ключевого слова even :

А теперь выберем все элементы кратные двум, начиная с шестого. Итак, оранжевыми будут “Zeta,” “Theta” и “Kappa”.

Демо

:nth-last-child

Псевдокласс :nth-last-child работает аналогично :nth-child , но выбирает элементы не с начала, а с конца.

Продолжим мучать греческий алфавит. Выберем второй элемент с конца — оранжевой у нас будет только “Iota”:

Теперь выберем все дочерние элементы по порядковому номеру с конца, кратному двум. Это будут Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha”:

Теперь выделим их же с помощью ключевого слова:

И, наконец. выберем все элементы с конца кратные двум начиная с шестого. “Epsilon,” “Gamma” и “Alpha”!

:nth-of-type

Псевдокласс :nth-of-type схож с :nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.

В следующем примере, оранжевый цвет будет у второго параграфа.

:nth-last-of-type

Псевдокласс :nth-last-of-type делает то же, что и :nth-of-type , но отсчитывая с конца.

В следующем примере мы будем выбирать второй параграф с конца (это будет первый параграф в статье):

Дополнительные ресурсы по классам семейства :nth

:only-child

Псевдокласс :only-child выбирает единственного потомка родительского элемента.

В следующем примере, в первом ul есть только один элемент, который будет выделен оранжевым. В следующем ul несколько потомков, поэтому их этот селектор не затронет.

:only-of-type

Псевдокласс :only-of-type выбирает элемент, у которого нет соседних элементов того же типа. Он похож на :only-child , но более осмыслен за счет указания конкретного элемента.

В следующем примере в первом ul только один элемент списка, который и будет выделен оранжевым.

:target

Псевдокласс :target выбирает элемент, ID которого используется в качестве хэша в URL.

В следующем примере, статья с ID target будет выделяться, когда URL в адресной строке будет завершаться на #target .

URL: http://awesomebook.com/#target

Совет: короткая запись background в стилях успешно заменяет background-color .

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

Формы всегда были ядом веб-дизайна и веб-разработки. С помощью псевдоклассов валидации, мы можем сделать процесс заполнения форм более плавным и приятным.

Илон Маск рекомендует:  Что такое код lstrcmp

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

:checked

Псевдокласс :checked выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем.

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

Демо

:default

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

В случае, если вам надо выбрать кнопку по умолчанию в форме с незаданным классом, вы можете использовать псевдокласс :default .

Учитывайте, что наличие кнопки “Reset” или “Clear” в форме создает проблемы с юзабилити. Подробнее об этом можно прочитать в следующих статьях.

Демо

:disabled

Псевдокласс :disabled выбирает отключенный элемент формы (элемент, который пользователь не может выделить, отметить, активировать или перенести на него фокус).

В следующем примере поле ввода name , поэтому оно будет выведено наполовину прозрачным.

Совет: в разметке не обязательно писать disabled=»disabled» , того же результата можно достичь просто использовав атрибут disabled . Однако полная запись необходима в XHTML.

Демо:

:empty

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

Вот более полные определения:

Нет содержимого или каких-либо символов. Комментарии HTML содержимым не считаются.

Не пустой элемент

В элементе есть какие-либо символы, даже невидимые, например, пробел.

В следующем примере:

  • В верхнем контейнере есть текст, поэтому у него будет оранжевый фон;
  • Во втором контейнере есть пробел, который считается контентом, его фон также будет оранжевым;
  • В третьем контейнере нет ничего — он пустой и поэтому у него желтый фон.
  • В последнем контейнере есть комментарий HTML, который не считается контентом и поэтому у контейнера желтый фон.

Демо:

:enabled

Псевдокласс :enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled .

Мы можем использовать комбинацию :enabled и :disabled , чтобы обеспечить визуальную обратную связь, улучшая тем самым пользовательский опыт.

В следующем примере, ранее отключенное поле ввода name включено, к нему добавлена однопиксельная граница зеленого цвета и полная непрозрачность.

Совет: использование в разметке enabled=»enabled» не требуется, достаточно просто enabled ; исключением является только XHTML.

Демо:

:in-range

Псевдокласс :in-range выбирает элементы, которым задан диапазон и значение, которых входит в этот диапазон.

В следующем примере поле ввода поддерживает диапазон между 5 и 10, все значения между ними вызовут измение цвета границы поля на зеленый.

Демо:

:out-of-range

Псевдокласс :out-of-range выбирает элемент, у которого есть диапазон и значение которого не входит в этот диапазон

В следующем примере поле ввода поддерживает диапазон от 1 до 12 — для всех остальных значений будет задан оранжевый цвет границы поля.

Демо:

:indeterminate

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

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

Демо:

:valid

Псевдокласс :valid выбирает элемент формы, если она заполнена корректно в соответствии с требуемым форматом.

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

:invalid

Псевдокласс :invalid выбирает элемент формы, если она заполнена некорректно в соответствии с требуемым форматом.

В следующем примере, поле ввода email отформатировано неправильно, поэтому оно будет считаться невалидным и, соответственно, получит однопиксельную оранжевую границу.

Демо:

:optional

Псевдокласс :optional выбирает поля ввода, которые не являются обязательными. Другими словами, любой элемент input без атрибута required будет выбран псевдоклассом :optional .

В следующем примере поле ввода опционально — у него нет атрибута required и поэтому текст в этом поле будет серым.

:read-only

Псевдокласс :read-only выбирает элемент, которые не может быть отредактирован пользователем. Он похож на :disabled — и выбор между ними зависит от использованного атрибута в разметке.

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

В следующем примере у элемента input есть атрибут readonly . Мы выделим этот элемент серым цветом благодаря псевдоклассу :read-only .

Демо:

:read-write

Псевдокласс :read-write выбирает элементы, которые могут редактироваться пользователем. Он может работать со всеми элементами HTML с атрибутом contenteditable .

Этот псевдокласс можно сочетать с псевдоклассом :focus для улучшения пользовательского опыта в определенных ситуациях.

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

Демо:

:required

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

В дополнение к традиционному астериску (*), которым обычно отмечают обязательные поля, мы можем добавить стили CSS, таким образом мы берем лучшее из двух миров.

В следующем примере, у поля ввода есть атрибут required . Мы можем улучшить впечатления пользователя, соответствующим стилем показав обязательность поля.

Демо:

:scope (эксп.)

Псевдокласс :scope имеет смысл, когда он привязан к HTML-атрибуту scoped тега style .

Если этого атрибута у тега style нет в разделе страницы, значит этот псевдокласс выберет элемент html , который является зоной видимости для стилей по умолчанию.

В следующем примере, у блока HTML есть стили с атрибутом scoped , поэтому весь текст второго элемента section будет выделен курсивом.

Демо:

Псевдоклассы, связанные с языком страницы

Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не работают с медиа-контентом типа изображений или видео.

:dir (эксп.)

Псевдокласс :dir выбирает элемент, направленность текста в котором определена в документе. Другими словами, чтобы использовать этот псевдокласс, нам надо в разметке у соответствующего элемента добавить атрибут dir .

На данный момент поддерживается два направления текста: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с префиксом -moz-dir() ) поддерживается псевдокласс :dir . В будущем префикс, скорее всего, будет не нужен, поэтому в примерах селектор задан как с префиксом, так и без него.

Примечание: Сочетание префиксной и безпрефиксной версий в одном правиле не работает. Надо создавать два отдельных правила.

В следующем примере оранжевым цветом будет выделен параграф на арабском (как известно, текст в нем пишется справа налево).

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

Демо:

Псевдокласс :lang выбирает элемент с указанным языком. Язык может быть задан с помощью атрибута lang=»» , соответствующего элемента meta или же в HTTP-заголовках.

Атрибут lang=»» обычно используется с тегом html , но он также может применяться и к любому другому тегу.

Для чего этом можно использовать? Например, общей практикой является использование традиционных для каждого языка кавычек с помощью свойства CSS quotes . Однако большинство браузеров (включая IE9 и выше) способны добавлять нужные кавычки автоматически, если они не объявлены в CSS.

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

Вот, например, немецкие кавычки, добавленные браузером:

Однако, в большинстве случаев, немецкие кавычки добавленные в CSS выглядят так:

Верными являются оба варианта. Поэтому решение остается за вами — отдать ли выбор кавычек на усмотрение браузера или использовать псевдокласс :lang и свойство CSS quotes .

Давайте добавим кавычки с помощью CSS.

Демо:

Остальные псевдоклассы

Теперь перейдем к оставшемся псевдоклассам и их функциональности

Псевдокласс :root ссылается на высший родительский элемент в документе.

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

Давайте добавим фоновый цвет к элементу html .

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

:fullscreen (эксп.)

Псевдоклассс :fullscreen выбирает элемент, выведенный на всю ширину экрана.

Однако, он не рассчитан на работу при нажатии пользователем F11 и переходе браузера в полноэкранный режим. Он скорее ориентирован на работу с JavaScript Fullscreen API, предназначенном для изображений, видео и игр, выполняющихся в родительском контейнере.

О переходе в полноэкранный режим выводится сообщение в верхней части браузера, вернуться из него можно нажав клавишу Escape . Мы сталкиваемся с этим при просмотре видео в максимальном размере на YouTube или Vimeo.

Если вы собираетесь использовать псевдокласс :fullscreen , учитывайте, что стили браузеров в этом режиме очень различны. И вам придется использвать браузерные префиксы не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку Эрнан Райчерта screenfull.js, решающую большую часть проблем с кроссбраузерными глюками.

Рассмотрение Fullscreen API находится за пределами этой статьи, вот сниппет, который будет работать в браузерах на движках WebKit и Blink.

Демо:

Псевдоэлементы

Как упоминалось в начале статьи, псевдоэлементы можно сравнить с виртуальными элементами, которые можно обрабатывать как обычные элементы HTML. Они не существуют в дереве документа или в DOM, это значит, что мы их создаем с помощью CSS.

Также напомню, что разница между двойным и одиночным доветочиями это просто визуальное различие между псевдоэлементами стандартов CSS 2.1 и CSS3, вы можете свободно использовать любой вариант.

::before/:before

Псевдоэлемент :before , также как и его сосед :after добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство content надо добавлять в CSS.

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

В результате будет выведено:

Примечание: Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно.

::after/:after

Псевдоэлемент :after также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство content надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.

В результате будет выведено:

::backdrop (эксп.)

Псевдоэлемент ::backdrop это бокс, генерируемый перед полноэкранным элементом, расположенным над всем остальным контентом. Он используется в сочетании с псевдоклассом :fullscreen для изменения цвета фона максимизированного окна — если вас не устраивает дефолтный черный.

Примечание: для псевдоэлемента ::backdrop обязательно двойное двоеточие, иначе он не работает.

Разовьем наш пример с псевдоклассом :fullscreen :

Демо:

::first-letter/:first-letter

Псевдоэлемент :first-letter выбирает первый символ на строке текста. Если перед текстом есть элемент типа изображения, видео или таблицы, он не влияет на текст и первая буква по-прежнему выбирается из текста.

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

Совет: этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в :before , несмотря на его отсутствие в DOM.

::first-line/:first-line

Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.

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

::selection

Псевдоэлемент ::selection используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом ::-moz-selection .

Примечание: сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.

::placeholder (эксп.)

Псевдоэлемент ::placeholder выбирает текст, добавленный в качестве заглушки в элементы формы с помощью атрибута placeholder .

Его также можно указывать как ::input-placeholder , этот синтаксис фактически и используется в CSS.

Примечание: этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью.

В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент ::placeholder реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

Заключение

Итак, похоже, это все.

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

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

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

Я просто нашел псевдо-класс :root .

Фрагмент: root CSS псевдонима соответствует корневому элементу дерева, представляющего документ. Применяется к HTML,: root представляет элемент и идентичен селектору html, за исключением того, что его специфика выше.

В чем именно он используется? Почему кто-нибудь когда-либо использовал его в стороне от более высокой специфичности, когда вы можете просто использовать селектор html ?

1 ответ

4 Решение Beterraba [2014-05-08 23:26:00]

за исключением того, что его специфика выше.

И почему это важно?

В обычном сценарии CSS, если у вас есть что-то вроде этого:

Вы получите синий фон, потому что он оценивается последним. Вы можете увидеть здесь.

Но если у вас есть это:

Вы получите красный фон. Вы можете увидеть здесь.

Представьте сценарий, в котором вы импортируете несколько библиотек, а некоторые из них задали некоторые свойства в html , из которых вы хотите избавиться. Вы можете определить свои свойства как !important , вы можете организовать свой импорт, чтобы все, что вы хотите, оценивалось последним, или вы можете использовать селектор :root .

Другие сценарии

Как указано @user2864740 и @13ruce1337, CSS применяется не только к HTML, но и к любому XML-документу, включая простой XML, SVG и XUL. Псевдокласс :root правильно выберет корень других типов документов.

Убрать var CSS из :root может оказаться хорошей идеей

Дата публикации: 2020-04-19

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

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

Почему мы ставим переменные для :root в начало.

Почему глобальный охват не подходит для всего.

Как преодолеть влияние классов с помощью локальных свойств

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Как обстоят дела с пользовательскими свойствами и :root?

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

Субъект :root упоминается, как то же самое, что html, но с более высокой специфичностью, и это все. Но имеет ли значение эта более высокая специфичность? На самом деле, нет. Все, что он делает, это выбирает html с более высокой специфичностью, точно так же, как селектор класса имеет более высокую специфичность, чем селектор элемента при выборе div.

Основная причина этого заключается в том, что CSS используется не только для оформления HTML-документов. Он также используется для файлов XML и SVG.

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

Тем не менее, с каждым использованием :root, он быстро стал «стандартом». Он также помогает отделить переменные для последующего использования от селекторов, которые активно оформляют документ.

Почему глобальный охват не подходит для всего

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

Конечно, это дает нам место, из которого мы можем управлять стилями с помощью пользовательских свойств. Но зачем нам определять —header-color или —header-shadow для :root? Это не глобальные свойства, я явно использую их в заголовке и нигде больше. Если это не глобальное свойство, зачем определять его глобально? Вот где в игру вступает локальная область видимости.

Свойства в локальной области действия

Допустим, у нас есть список стилей, но наш сайт использует систему иконок — скажем, Font Awesome для простоты. Мы не хотим использовать disc для маркеров ul — нам нужна собственная иконка! Если я хочу отключить маркеры неупорядоченного списка для иконок Font Awesome, мы можем сделать что-то вроде этого:

Хотя это очень просто сделать, одной из проблем является то, что иконка становится абстрактной. Если мы не будем использовать Font Awesome реально много, мы можем не знать, что значит f14, не говоря уже о том, чтобы быть в состоянии идентифицировать ее, как иконку флажка. Это семантически бессмысленно. Мы можем уточнить вещи с помощью пользовательского свойства.

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

Затем в CSS мы можем создать пользовательские свойства для разных иконок:

Реальная сила локальной области видимости пользовательских свойств проявляется, когда мы фактически хотим применить иконки. Мы можем установить для списка пунктов content: var(—icon):

Илон Маск рекомендует:  Dos fn 47h дать умалчиваемое оглавление dos

Затем мы можем определить эту иконку для каждого из списков с более осмысленными именами:

Мы можем сделать это на ступеньку выше, добавив цвета:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Перемещение иконок в глобальную область видимости

Если мы работаем с системой иконок, такой как Font Awesome, то я предполагаю, что мы будем использовать их не только для замены маркеров в неупорядоченных списках. Пока мы используем их более чем в одном месте, имеет смысл перемещать иконки в то место :root, которое нам нужно, чтобы они были доступны глобально.

Наличие иконок в :root не означает, что мы по-прежнему не можем использовать преимущества пользовательских свойств локальной области!

Добавление резервных вариантов

Мы можем либо добавить иконку по умолчанию, установив ее как резервный вариант (например var(—icon, «/f1cb»)), либо, поскольку мы используем свойство content, мы можем даже добавить сообщение об ошибке var(—icon, «no icon set»).

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

Конечно, это не ограничивается Font Awesome. Локальная область видимости пользовательских свойств также отлично подходит для системы иконок SVG:

Использование ограниченных локально свойств для большей модульности кода

В то время как пример, который мы только что рассмотрели, хорошо подходит для повышения читабельности кода — что удивительно — мы можем сделать намного больше с помощью свойств локальной области видимости.

Некоторым людям нравится CSS как есть; другие ненавидят работать с глобальным охватом каскада. Я здесь не буду обсуждать CSS-in-JS (достаточно умных людей уже пишут об этом), но пользовательские локальные свойства дают нам фантастическое промежуточное решение.

Используя преимущества пользовательских свойств в локальной области, мы можем создать очень модульный код, который сэкономит нам много усилий при попытке найти значимые имена классов. Давайте рассмотрим конкретный сценарий.

Отчасти причина разочарования людей в CSS заключается в том, что следующая разметка может вызвать проблемы, когда мы хотим что-то стилизовать.

Если создать стиль для класса .title, он будет стилизовать одновременно и элементы содержащие .card, и классы .cta. Мы можем использовать составной селектор (то есть .card .title), но это повышает специфичность, что может ухудшить поддерживаемость. Или мы можем принять подход BEM и переименовать класс .title в .card__title и .cta__title, чтобы больше изолировать эти элементы.

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

Затем мы можем контролировать все, что нам нужно, в родительских селекторах соответственно:

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

Мы могли бы даже использовать calc(), чтобы добавить для кнопки масштаб, что потенциально может помочь избавиться от таких классов, как .btn-sm, btn-lg (или эти классы могут собираться в зависимости от ситуации).

Вот более детальный обзор всего этого в действии:

Обратите внимание, что в приведенном выше примере я использовал некоторые общие классы, такие как .title и .button, которые имеют стили с локальными областями действия (с помощью резервных вариантов). Настроив для них пользовательские свойства, я могу определить их локально в родительском селекторе, эффективно назначая каждому свой стиль без необходимости дополнительного селектора.

Я также настроил карты прайсов с классами модификаторов для них. Используя универсальный класс .pricing, я все настроил, а затем, используя классы модификаторов, я переопределил некоторые свойства, такие как —text, и —background, не беспокоясь об использовании составных селекторов или дополнительных классов.

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

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

Автор: Kevin Powell

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Я только что нашел псевдокласс :root .

Псевдокласс: root CSS соответствует корневому элементу дерева, представляющего документ. Применительно к HTML: root представляет элемент и идентичен селектору html, за исключением того, что его специфика выше.

Для чего именно он используется? Зачем кому-то использовать его помимо более высокой специфичности, когда вы можете просто использовать селектор html ?

1 ответ

за исключением того, что его специфика выше.

И почему это важно?

В обычном сценарии CSS, если у вас есть что-то вроде этого:

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

Но если у вас есть это вместо этого:

Представьте себе сценарий, в котором вы импортируете несколько библиотек, а некоторые из них задают некоторые свойства для html , от которого хотите избавиться. Вы можете определить свои свойства как !important , вы можете организовать импорт так, чтобы то, что вы хотите, оценивалось последним, или вы можете использовать :root селектор.

Другие сценарии

Как указали @ user2864740 и @ 13ruce1337, CSS применяется не только к HTML, но и к любой вид XML-документа, включая простой XML, SVG и XUL . Псевдокласс :root правильно выберет корень документа других типов.

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

Я просто нашел псевдо-класс :root .

Фрагмент: root CSS псевдонима соответствует корневому элементу дерева, представляющего документ. Применяется к HTML,: root представляет элемент и идентичен селектору html, за исключением того, что его специфика выше.

В чем именно он используется? Почему кто-нибудь когда-либо использовал его в стороне от более высокой специфичности, когда вы можете просто использовать селектор html ?

за исключением того, что его специфика выше.

И почему это важно?

В обычном сценарии CSS, если у вас есть что-то вроде этого:

Вы получите синий фон, потому что он оценивается последним. Вы можете увидеть здесь.

Но если у вас есть это:

Вы получите красный фон. Вы можете увидеть здесь.

Представьте сценарий, в котором вы импортируете несколько библиотек, а некоторые из них задали некоторые свойства в html , из которых вы хотите избавиться. Вы можете определить свои свойства как !important , вы можете организовать свой импорт, чтобы все, что вы хотите, оценивалось последним, или вы можете использовать селектор :root .

Другие сценарии

Как указано @user2864740 и @13ruce1337, CSS применяется не только к HTML, но и к любому XML-документу, включая простой XML, SVG и XUL. Псевдокласс :root правильно выберет корень других типов документов.

Справочник CSS

Псевдо-класс :root представляет «родительский» элемент самого высокого уровня в DOM. Он определен в спецификации CSS Selectors Level 3.

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

Псевдо-класс :root удобно использовать для объявления глобальных переменных:

Chrome Opera Firefox IE Edge Safari iOS Safari Opera Mini Android Browser Chrome for Android
Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

CSS — Селекторы

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

Что такое CSS селекторы?

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

Пример CSS правила:

В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.

Базовые селекторы

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

Селектор по элементу (тегу)

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

Пример задания правила для всех элементов p на странице:

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

Пример задания правила для всех элементов, имеющих класс center :

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Пример задания правила для всех элементов на странице:

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

  • [attr] – по имени атрибута;
  • [attr=value] – по имени и значению атрибута;
  • [attr^=value] – по имени и значению, с которого оно должно начинаться;
  • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
  • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
  • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
  • [attr

=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

Пример задания правила для всех элементов на странице, имеющих атрибут target :

[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

[attr^=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :

[attr|=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

[attr$=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

[attr*=value]

Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA ):

Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

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

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

Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .

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

К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

Псевдоклассы :hover , :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:

Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

Псевдокласс :focus

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

Пример задания CSS правила для элемента input[type=»text»] при нахождении его в фокусе:

По расположению среди соседей

При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.

Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .

Псевдокласс :first-child

Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

Псевдокласс :last-child

Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:

Псевдокласс :only-child

Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.

Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.

Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .

Псевдокласс :nth-child(выражение)

Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Формула имеет следующую запись: An + B . A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).

Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .

А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .

Псевдокласс :nth-last-child(выражение)

Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

По расположению среди соседей с учётом типа элемента

В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .

Псевдокласс :first-of-type

Данный псевдокласс очень похож на :first-child , но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа .

Например, выберем все элементы p , которые являются первыми элементами указанного типа у своего родителя:

При использовании селектора p:first-child , не один элемент p не был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.

Псевдокласс :last-of-type

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

Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.

В этом примере стили будут применены к элементам p , которые являются единственным элементом p внутри своего родителя.

Псевдокласс :nth-of-type(выражение)

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

Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .

Псевдокласс :nth-last-of-type(выражение)

Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

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

К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .

Псевдоклассы этой группы, а также :hover , :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

Псевдокласс :checked

Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.

В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .

Псевдокласс :enabled

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

Пример, в котором установим для всех включенных элементов input фон:

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

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

Например, выберем все отключенные элементы input :

Остальные псевдоклассы

Псевдокласс :not(селектор)

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

При необходимости можно использовать несколько псевдоклассов :not() .

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

Псевдокласс :empty

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

Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

Применять :root можно например для объявления CSS переменных:

Псевдокласс :target

Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

В этом примере стили будут применены к элементу с , если хэш URL страницы будет равен #header-1 . Если же хэш будет равен #header-2 , то псевдокласс :target соответственно выберет элемент с и стили уже будут применены к нему.

Группировка селекторов

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

Синтаксис: селектор1, селектор2, .

Пример задания правила для всех элементов h3 и h4 на странице:

Комбинирование селекторов

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

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

Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:

Селекторы отношений

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

Виды отношений между HTML элементами:

  • родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
  • предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
  • дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
  • потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
  • соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.

Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

В CSS имеется 4 вида селекторов отношений.

Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

Остальные два X + Y и X

Y являются CSS селекторами для выбора соседних элементов.

Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

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

Селекторы X Y называют контекстными или вложенными.

Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .

Селектор X > Y

Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .

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

Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X

Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).

span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.

Приоритет селекторов

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

Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .

При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.

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

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

  • универсальный селектор (не добавляет вес) – 0,0,0,0 ;
  • селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
  • селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
  • селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;

Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .

  • * – 0,0,0,0 ;
  • li – 0,0,0,1 ;
  • li::before – 0,0,0,2 ;
  • ul > li – 0,0,0,2 ;
  • div input+label – 0,0,0,3 ;
  • h1 + div[data-target] – 0,0,1,2 ;
  • .btn.show – 0,0,2,0 ;
  • ul li a.item – 0,0,1,3 ;
  • #aside div.show – 0,1,1,1 ;
  • style=». » – 1,0,0,0 ;

Повысить важность определённого CSS свойства можно с помощью ключевого слова !important . В этом случае будет использоваться именно данное CSS-свойство.

В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.

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

В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).

Каких селекторов нет в CSS?

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

Как использовать псевдоклассы CSS?

Приветствую вас, дорогие друзья!

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

Идея использования псевдоклассов заключается в том, что мы можем в CSS к какому-то тегу, классу или идентификатору дописать определенное кодовое слово, далее задать набор нужных нам CSS-свойств, и таким образом повлиять на внешнее оформление практически любого элемента на нашем сайте, в зависимости от его состояния, положения на странице и даже принадлежности к тому или иному языку. Это очень удобно и активно используется в современной вёрстке!

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

Все псевдоклассы CSS условно разделяют на несколько групп:

  • Структурные псевдоклассы
  • Динамические псевдоклассы
  • Языковые псевдоклассы
  • Псевдоклассы отрицания др.

Структурные псевдклассы CSS

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

Если нам нужно каким-то образом изменить оформление первого элемента внутри этого блока, то мы можем использовать псевдокласс first-child.
Давайте разберём пример с таким кодом страницы:

У нас есть блок с классом iw-blocks, внутри которого находится несколько блоков с одинаковыми классами. Так же у них может не быть этих классов, и, тем не менее, мы сможем обратиться к любому из них, и дописать нужные CSS-свойства.

Чтобы дописать CSS свойства только для первого элемента нам нужно:

  1. 1. Сначала указываем класс или идентификатор родительского блока, того элемента, к которому нам нужно обратиться. В данном случае это класс iw-blocks.
  2. 2. Далее пишем тег или класс одного из нескольких повторяющихся элементов. В данном случае у нас повторяются несколько блоков с классом block. Поэтому мы можем использовать либо название класса, либо же просто написать тег div.
  3. 3. Через двоеточие пишем название псевдокласса CSS, которое мы будем использовать:
    :first-child
  4. 4. В фигурных скобках зададим ему CSS-свойства. Например, изменим цвет фона и цвет текста.

После сохранения изменений и обновления страницы дописанные CSS-свойства сработают только для первого блока с классом block.

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

В этом случае пишем так:

Также вместо :first-child мы можем использовать любой из указанных ниже псевдоклассов CSS.

:nth-last-child – применяет стили для последнего дочернего элемента.

  • :nth-last-child(3) – применяет стили для третьего дочернего элемента с конца. Вместо значения 3 может стоять любое число.
  • :nth-child(2) — применяет стили для второго дочернего элемента по порядку. В скобках может стоять любое другое число.
  • :nth-child(2n) — этот псевдокласс применяет стили для каждого второго дочернего элемента по порядку.

Так же есть и другие структурные псевдоклассы CSS, но они используются значительно реже.

  • :only-child — сработает, если элемент является единственным дочерним.
  • :only-of-type — применяет слили для единственного элемента указанного типа в родительском блоке.
  • :empty — сработает для элемента, который не имеет вложенных тегов.
  • :root – корневой элемент на странице.

Динамические псевдоклассы CSS

  • :hover — этот псевдокласс применит CSS стили для элемента при наведении на него курсора мышки.
  • :focus, :active — позволяет применить нужные CSS свойства для ссылок, полей форм, кнопок и других элементов, которые активировали (выделили) кликом мышки или переходом при помощи клавиши TAB на клавиатуре.
  • :link — псевдокласс для ссылки, по которой не осуществлялся переход.
  • :visited — псевдокласс для ссылки, по которой посетитель уже переходил.

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

div:not(.price) – применит CSS свойства для всех блоков div, кроме блоков с классом price

Так же можно вместо класса указывать названия тегов или использовать другие псевдоклассы:

span:not(:last-child) – псевдокласс применит CSS свойства ко всем тегам span кроме последнего.

Использование языкового псевдокласса CSS

Так же мы можем использовать псевдокласс :lang() для выделения блоков принадлежащих к определённому языку.

Для того чтобы браузеру было понятно какой это язык у блока должен стоять атрибут с кодом языка

Используем возможности CSS4 уже сегодня с cssnext

Вот уже на протяжении четырёх лет, с сентября 2011 г. W3C занимается разработкой CSS4. Модули четвёртой версии каскадных таблиц стилей проектируются на базе CSS3 и дополняют их новыми свойствами и значениями. В этой статье я хотел бы рассказать о том, как использовать возможности CSS4 уже сегодня, о cssnext.

Итак, cssnext — это CSS компилятор, позволяющий использовать последний синтаксис CSS уже сегодня. Он преобразует новые CSS спецификации в более современный код так, что вам не придётся ждать поддержки новых возможностей в вашем браузере.

Возможности

Автоматическая расстановка вендорных префиксов

Вендорные префиксы автоматически добавляются (или же, в том случае если они являются устаревшими, удаляются) с помощью PostCSS плагина Autoprefixer.

Переменные в свойствах CSS

Благодаря возможностям cssnext в корневом селекторе :root мы можем задавать неограниченное число переменных и использовать их в наших CSS свойствах.

Простые математические выражения

Позволяет использовать свойство calc(). Данное свойство можно использовать не только с простыми значениями, но и с переменными.

Переменные для медиа-запросов
Улучшенный синтаксис медиа-запросов

Читают сейчас

Похожие публикации

  • 9 августа 2020 в 13:15

Практическое руководство по использованию CSS Modules в React приложениях

4 мифа о PostCSS

PostCSS быстрый старт

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 48

THERE IS NO SUCH THING AS CSS4

я в драфте вложенности не видел

Preprocessors are okay with needing arbitrary lookahead to parse CSS. Browsers aren’t — they want fast, parallizable parsing, and that means fixed, small amounts of lookahead.

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

Кроме того, стараются максимально обезопасить себя от проблем обратной совместимости в будущем: препроцессор при необходимости можно исправить, а синтаксис CSS — практически нет.

подводных камней в синтаксисе с амперсандами нету.

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

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

Одно другому не мешает. Польза амперсанда как универсальной возможности сослаться на родительский селектор (например, для обозначенных вами целей) несомненна, он неоптимален именно для обеспечения простой вложенности правил. Иначе говоря, лучше так:

Зачем во втором примере нужны амперсанды? Это изврат по-моему.

Будет всё тоже самое.

опасаются неоднозначностей, которые усложняли (и, соответственно, замедляли) бы механизм разбора CSS-кода, вынуждая его «заглядывать вперёд» (look ahead), чтобы отличить вложенное правило от обычного объявления.

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

чтобы понять, что color — это не имя свойства, а селектор вложенного правила, необходимо было бы просмотреть код до открывающей фигурной скобки.

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

Могу в качестве примера привести грид-сетку.

Улучшенный синтаксис медиа-запросов

Позволяет использовать выражения >= и @media (500px , а так — один фиг, что min-width , что w >.

Вот это вот вообще не следовало сюда включать.

Следует указать, что этот псевдокласс уже существует и успешно используется. В CSS4 только добавляется возможность указать список.

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

Если рассматривать с точки зрения фронтенд разработчика, то вообще без разницы, использовать ли less/sass/stylus или postcss с плагинами. Но тут такая беда: css сам по себе — это не более, чем просто таблица стилей, что ярко показывает расшифровка аббревиатуры. Тут не нужны какие-то супер-пупер плагины, а достаточно того, что уже есть в препроцессорах, а именно переменных, автопрефиксов, в редких случая циклов, вложенности и замены некоторых свойств на их более совместимые со старичками конструкции (необходимость которых падает с каждым днем со скоростью, сравнимой со скоростью развития postcss).

Итого лично я стал бы использовать postcss в том случае, если он ИЗ КОРОБКИ и БЕЗ ДОПОЛНИТЕЛЬНОЙ НАСТРОЙКИ ПЛАГИНОВ давал бы мне больше, чем stylus. Но stylus (с 1 модулем kouto-swiss) уже дает мне все, что нужно. Если углубляться, то stylus, к тому же, дает объективно больше, чем остальные препроцессоры.
А зачем мне «язык программирования» для css? Я считаю, что оно того не стоит и роль postcss в будущем написания стилей сильно преувеличена.

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

Вброс, конечно, сильный :) Но думаю с тем, что тесты на том же coffescript смотрятся куда красивее, вы ведь спорить не будете?

Ну и es6 смотрели? Вот ведь глупые, синтаксический сахар для классов то все-таки ввели, темный люди :(

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

Я только что нашел псевдо-класс :root .

Псевдокласс: root CSS соответствует корневому элементу дерева, представляющего документ. Применительно к HTML: root представляет элемент и идентичен селектору html, за исключением того, что его специфика выше.

Для чего именно это используется? Зачем кому-то использовать его помимо более высокой специфичности, когда вы можете просто использовать html селектор?

1 ответ

кроме того, что его специфика выше.

И почему это важно?

В обычном сценарии CSS, если у вас есть что-то вроде этого:

Вы получите синий фон, потому что он оценивается последним. Вы можете увидеть здесь .

Но, если у вас есть это вместо:

Вы получите красный фон. Вы можете увидеть здесь .

Представьте себе сценарий, в котором вы импортируете несколько библиотек, а некоторые из них задают в html некоторые свойства, от которых хотите избавиться. Вы можете определить свои свойства как !important , вы можете организовать импорт так, чтобы то, что вы хотите, оценивалось последним, или вы можете использовать :root селектор.

Другие сценарии

Как указали @ user2864740 и @ 13ruce1337, CSS применяется не только к HTML, но и к любому XML-документу, включая обычный XML, SVG и XUL . Псевдокласс :root правильно выберет корень других типов документов.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL