CSS селекторы особенности спецификации level 4, псевдо-классы и псевдо-элементы


Содержание материала:

Что такое псевдоклассы и псевдоэлементы в CSS.

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

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

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

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

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

Как получить доступ к таким элементам на странице?

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

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

Псевдоэлементы – это селекторы, которые определяют область элементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS .

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

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

Для составления этого списка использовались материалы этой страницы страндарта:

В разделе 4.2. Selector Index приводится официальная таблица.

Итак, список псевдоклассов:

Псевдоэлементов намного меньше, вот их список:

Здесь, E — элемент, к которому применяется селектор.

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

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

Яндекс Метрика и Google Analytics. Цели, события, отчеты.

CSS: псевдоэлементы и псевдоклассы

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

Что это такое?

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

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

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

После: after

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

Каждый, наверное, хотя бы раз видел на каком-либо сайте анонсы публикаций, после которых стояли слова: «Новинка», «Новое» или «Шок», «Избранное», «Лучшее», «Супер» и т. д. Эти объекты были заданы при помощи псевдоэлемента CSS after.

Чтобы создать такую позицию, необходимо добавить в каскадную таблицу стилей такой код:

Здесь словом new задается название нового класса, поэтому перед нужным абзацем в HTML разметке нужно вписать: . Название класса должно находиться между скобками открывающего тега. Если все сделать правильно, то после окончания абзаца на странице браузера появится надпись «Кое-что новенькое».

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

До: before

Практически идентичными характеристиками обладает псевдоэлемент CSS before. С одним небольшим отличием: он предназначен для того, чтобы добавлять необходимые элементы перед объектом. Записывается точно так же, как и after, только со словом before.

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

Чтобы сделать отступы в конце документа, необходимо создать псевдокласс after и вместо content: open написать content: close, соответственным образом поменять позиционирование. Если в псевдоклассе before отступ был от левого поля, то в классе after он должен быть от правого. Также в разметку можно добавить изображение (допустим, тех же кавычек), и текст уже не будет смотреться как унылая простыня.

Эпичная сага: first

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

Этот псевдоэлемент CSS имеет две характеристики — line и letter:

  • Letter – изменяет первую букву того фрагмента текста, к которому его добавляют. Таким образом, он формирует буквицу – элемент, в котором базовая линия находится на несколько строк ниже относительно главного текста. Чтобы задать этот параметр в каскадной таблице стилей, нужно задать характеристики для параграфа. Например, P:first-letter — и уже между скобками указать все необходимые параметры, такие как цвет, шрифт, размер. Если буквицу необходимо создать только для первого абзаца, тогда создается новый класс (так же, как и в примере с new: after).
  • Line – эта позиция полностью меняет первую строку абзаца. Очень удобно использовать в научных публикациях, если нужно выделить важную информацию. Записывается так же, как и прочие примеры. Но здесь важно помнить, что псевдоэлемент выделяет не предложение, а именно строку. В зависимости от того, каким браузером пользуется пользователь, у него первая строка может быть длиннее или короче, поэтому важно следить за тем, чтобы это выделение не смотрелось нелепо. Именно для таких случаев был создан в CSS псевдоэлемент переноса строки.

Новая строка

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

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

Синтаксис псевдоклассов

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

Все псевдоклассы записываются в таблицу каскадных стилей простым и проверенным синтаксисом:

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

  • те, что определяют состояние элемента;
  • те, что относятся к псевдоэлементам;
  • фиктивные классы, определяющие язык контента.

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

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

  • :active. Если применить этот псевдокласс, то при нажатии мышкой на отдельный фрагмент он станет активным. Это проявится в изменении цвета, увеличении размера, или появится анимация.
  • :link. В основном применяется к ссылкам, которые пользователь еще не посещал. Они остаются неизмененными.
  • :focus. Чаще всего используют для текстовых документов, когда пользователь, установив на поле курсор, может поменять цвет текста. Иногда это используют и для изображений. Например, выставляют картинку затененную, но при щелчке она приобретает естественный цвет.
  • :hover. Когда пользователь просто наводит мышкой на определенный объект, он может поменять цвет или форму, при этом ему не нужно делать щелчок.
  • :visited. В основном этот псевдокласс предназначен для посещенных ссылок, которые меняют свой цвет на фиолетовый по умолчанию.

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

Специально для псевдоэлементов CSS

К этой группе селекторов относят псевдоклассы, которые могут изменить псевдоэлементы. Таким псевдоклассом является :first-child. В каскадной таблице стилей необходимо создать новый класс для :first-child и задать цвет текста или его размер. Результат будет иметь следующий вид:

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

Также :first-child используют, чтобы убрать отступ в первом абзаце, тогда вместо color: red; необходимо будет написать text-indent: 0;, а В заменить на Р (также обозначается тег, который отвечает за начало абзаца).

Язык контента

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

Что касается позиции «язык», то он обозначается согласно принятым нормам. Например, английский — en, русский — ru, немецкий — de и т. д. Благодаря этому псевдоклассу можно изменить стиль иностранного текста во всем документе.

Выводы

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

Новые возможности CSS4

Прогресс не стоит на месте и в спину CSS3 уже дышит CSS4 , разрабатываемый под крылом консорциума W3C. Исторически сложилось так, что разработка стандарта CSS ведется независимо от разработки веб-браузеров.

Это ведет к тому, что различные браузеры в различной степени поддерживают спецификацию CSS. Но вернемся к CSS4. W3C периодически обновляет черновую (рабочую) спецификацию CSS4 и я хочу донести до вас основную информацию о том, что уже внесено в документ « CSS selectors level 4 ».

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

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

Логические комбинации: псевдоклассы :not( ) и :matches( )

В CSS3, псевдокласс отрицания :not мог применяться только к простым селекторам, псевдоклассам, тегам, идентификаторам, классам и параметрам селекторов классов. Псевдоэлементы и комбинации вроде UL LI или UL > LI не поддерживались и, к тому же, мы не могли использовать псевдокласс отрицания :not сам по себе.

В спецификации Level 4 , псевдокласс :not( ) теперь может быть применен к сложным селекторам, а также к группе селекторов.

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

То же самое касается и класса :matches – это новый псевдокласс, который позволяет выбирать классы для однотипных элементов.

Например, если имеются классы article.active и article.visible , то можно использовать конструкцию, приведенную ниже, чтобы выбрать оба класса. Особенно это актуально, если таких классов много.

Селекторы атрибутов: чувствительность к регистру

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

атрибут ‘hsides’ будет применен к ‘frame’ вне зависимости от написания: ‘HSIDES’ , ‘hsides’ , ‘Hsides’ и так далее. Это применимо даже в XML с регистро-зависимыми значениями. Это позволит избежать длинного и утомительного поиска ошибок.

Языковые псевдоклассы

Еще одним новым псевдоклассом в CSS4 является :dir . В HTML5 он используется для определения направления текста элементов. Псевдокласс :dir(rtl) выберет элементы с направлением справа-налево, а :dir(ltr) наоборот – слева-направо.

Обратите внимание, что :dir это не то же самое, что селектор атрибута [dir=…] , так как первый выбирает значение определенное User Agent`ом.

Новые изменения коснулись и языкового псевдокласса :lang . На данный момент, :lang может делать выборку по шаблону поиска. Например, селектор :lang(de-DE) выберет все подходящие теги языков, не только ‘de-DE’ , но и ‘de-DE-1996; .

Выборка по шаблону выполняется с помощью символа звездочки. Например, *-CH выберет ‘de-CH’ , ‘it-CH’ и все остальные, подходящие под шаблон.

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

Псевдоклассы расположения

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

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

  • :local-link(0) – выберет ссылки с нулевым уровнем вложенности, то есть содержащие URL сайта;
  • :local-link(1) – выберет ссылки с уровнем вложенности равным единице, выберет ссылки, содержащие один элемент после имени сайта;
  • :local-link(2) – выберет ссылки с уровнем вложенности равным 2, выберет ссылки, содержащие два элемента после имени сайта;
  • и так далее.

Псевдокласс :scope применяет стили только к тем элементам, которые входят в определенную ветвь DOM-дерева. Используется совместно с тегом в HTML5.

Псевдоклассы пользовательских действий: псевдоклассы drag-and-drop

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

Псевдоклассу :drop можно в скобках передать параметр:

  • :drop(active) – если пользователь задержит перетаскиваемый элемент над определенным как активная область элементом, то его можно туда «сбросить»;
  • :drop(valid) – если стандартный язык определяет целевые объекты как ‘val >:drop(invalid) – если стандартный язык определяет целевые объекты как ‘valid’ и ‘invalid’, то данный селектор выберет только неправильные области для перетаскиваемого объекта. В противном случае не будет выбрано ничего.

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

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

Псевдокласс :current выбирает элемент или его потомка, который активен в данный момент. Например, с помощью следующего селектора, тег

будет выбран, когда он будет читаться вслух:

Псевдокласс :past определяет момент времени до :current . А псевдокласс :future , соответственно после :current .

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

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

Псевдоклассы :enabled и :disabled

Псевдокласс :enabled выбирает элементы ввода, находящиеся в состоянии enabled . Напротив, псевдокласс :disabled выбирает элементы ввода, находящиеся в состоянии disabled .

Мутирующие псевдоклассы :read-only и :read-write

Псевдокласс :read-write выбирает элементы ввода, которые можно читать и редактировать, а :read-only – элементы, имеющие атрибут readonly .

Псевдокласс :placeholder-shown

Выбирает элементы ввода, для которых задан атрибут placeholder .

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

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

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

Псевдокласс :checked срабатывает, когда пользователь выбирает элемент radio- или checkbox.

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

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

Псевдоклассы :valid и :invalid

Элемент соответствует псевдоклассам :valid или :invalid , когда, соответственно, он содержит валидное или неверное значение, в зависимости от значения определенного языком документа.

Псевдоклассы :in-range и :out-of-range

Псевдоклассы :in-range и :out-of-range применяются к элементам, которые, соответственно, входят в заданный диапазон либо не входят в него.

Псевдоклассы :required и :optional

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

Псевдокласс :user-error

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

Псевдокласс :user-error должен учитывать псевдоклассы :invalid , :out-of-range или :required (если элемент пуст и является обязательным для ввода) после того, как пользователь попытался отправить форму на сервер и до того, как он повторно начал взаимодействие с полем ввода.

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

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

Группу из двух имеющихся структурных псевдоклассов ( :empty и :root ) дополнил новый, под названием :blank . Он похож на :empty , но выбирает символы между элементами.

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

Также, были добавлены два новых структурных псевдокласса – :nth-match (An+B ) и :nth-last-match (An+B ).

Селектор :nth-match предназначен для элементов, содержащих в себе дочерние теги в виде (An+B-1) и выбирает несколько элементов, идущих за ним. Селектор :nth-last-match действует похожим образом, за исключением того, что производит выбор уже после того, как документ выведен.

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

Эти псевдоклассы позволяют выбирать присоединенные элементы используя формат A /ATTR/ B , где один элемент соответствует другому по значению ID.

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

Выбор родительских элементов

CSS4 позволяет выбирать родительский элемент, используя формат A! > B, где A это родитель элемента B. Например, Мы можем выбрать родителя элемента, когда на него наведен указатель мыши.

Как вам известно, в CSS3, в случае выпадающего меню, когда в древовидной структуре активен последний тег

  • , родительский
  • всегда теряет фокус.

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

    Табличные селекторы

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

    Во-первых, появился оператор ‘||’ , который позволяет выбрать столбец по определенным критериям. Селектор :nth-column(n) позволяет стилизовать определенные колонки, отсчет которых ведется с начала. Селектор :nth-last-column(n) начинает отсчет с конца.

    Обратите внимание, что оба селектора могут включать значения ‘odd’ и ‘even’ . Взгляните на пример ниже:

    Данная публикация представляет собой перевод статьи « CSS4 – Selectors Level 4 » , подготовленной дружной командой проекта Интернет-технологии.ру

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

    Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было 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 .

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

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

    Заметьте, что несмотря на то, что большинство псевдоклассов этого раздела работают с элементами форм, некоторые из них могут работать и с другими элементами 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 однозначно удобны, не так ли? Они дают такое количество возможностей, что вы чувствуете себя перегруженными. Но в этом все жизнь веб-дизайнеров и разработчиков.

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

    CSS селекторы: особенности спецификации level 4, псевдо-классы и псевдо-элементы

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

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

    И псевдоклассы, и псевдоэлементы были с самого начала CSS, с CSS1 (в этом году их 20-летие!). И там же было такое пояснение различия между ними:

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

    Потом пришел CSS2, а за ним и CSS2.1. В июне 2011-го он с горем пополам стал стандартом, а в сентябре того же 2011-го стандартом стал модуль селекторов 3 уровня (и формально по сей день стандарт). Именно в нем у псевдоэлементов появилось двойное двоеточие. За это время приходили и уходили другие спецификации, от «вечного кандидата в рекомендации» базового UI 3 уровня до совсем чернового предложения от Adobe, и все они норовили прибавить что-то своё. А еще HTML5 со своими интерактивными новинками…

    Но то отличие в главном по-прежнему актуально.

    Любой псевдокласс соответствует какому-то элементу. Или в каком-то определенном состоянии, после каких-то действий пользователя (под фокусом, при наведении), или в каком-то определенном месте DOM-дерева (пятый в ряду, третий с конца…), или отвечает каким-то дополнительным условиям (напр. не является заголовком) — если некий элемент вдруг оказался в этом состоянии/в этом месте/с такими параметрами, к нему применится соответствующий псевдокласс. Само название указывает, что они — некое подобие классов. Как и классы, псевдоклассы можно комбинировать в каких угодно сочетаниях. У одного элемента их может быть сколько угодно (например, a:first-of-type:target:focus:hover) , причем в любом порядке.

    Действующий стандарт выделяет 6 категорий псевдоклассов, по не всегда понятной логике (чем :target не динамический?). В идущем ему на смену черновике CSS Selectors 4 классификацию чуть обновили:

    • языковые ( :dir , :lang )
    • псевдоклассы места (все ссылочные и :target )
    • действия пользователя ( :hover , :focus , :drop …)
    • временные (в теории, помогут подсветить элементы по мере озвучки их скринридером, показать субтитры для видео в нужный для них момент и т.п.)
    • состояния ввода ( :disabled , :in-range …)
    • структурные ( :root , :empty , :nth-* …)
    • новые псевдоклассы для выбора элементов по колонке таблицы или грида.
    • функциональные псевдоклассы для комбинации других селекторов ( :not() , :matches() и — только б не спугнуть! — долгожданный :has() ).

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

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

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

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

    Какие есть псевдоэлементы? Само собой, ::before и ::after . Чуть менее известны (хотя еще старше и работали даже в IE5!) ::first-line и ::first-letter . Эти 4 псевдоэлемента были в CSS2 (что дает им почетное право писаться с одним двоеточием). Удивительно, но в действующем стандарте только они и описаны! Лишь ::selection еще вскользь упомянут. Всё пёстрое богатство разнобраузерной «псевдофауны», что мы знаем по подборкам наподобие этой, стандарт словно игнорирует.

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

    • текстовые эффекты ( ::first-* )
    • генерируемый контент ( ::before , ::after , ::placeholder и ::marker )
    • средства для выделения и подсветки — ::selection и его друзья.

    Но здесь самое время остановиться и перейти от истории и теории к практике главной темы этой статьи — отношений псевдоэлементов с псевдоклассами и друг с другом:). Начнем с самого простого!

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

    Почему-то некоторые до сих пор этому удивляются. Но раз псевдокласс выбирает элемент — почему бы этому элементу не обзавестись еще и псевдоэлементом?

    Простейший случай, пожалуй — особое оформление для первого/последнего элементов в ряду. Например, дорисовать стрелки для крайних пунктов подобного меню. А заодно и перекрасить эти стрелки при наведении: псевдокласс для этого взят уже другой ( :hover ), но элементы-то выбираются те же самые (ссылки, в т.ч. крайние), а значит, мы фактически перекрашиваем те же самые псевдоэлементы. Что и требовалось.

    Ситуаций, где псевдоэлемент нужен только при определенном динамическом состоянии, немало. Давний пример — подсветка столбцов таблицы при наведении. Или всевозможные «выкрутасы» при валидации форм. Например, вариант, когда форма не отвлекает пользователя во время добавления, но «поздравляет» его, когда всё заполнено корректно (пример). Кстати, присмотритесь к этому примеру повнимательнее: ::before и ::after могут быть не только с краю! Увы, этот пример не работает в IE (он не понимает form:valid ).

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

    Итак, в нынешнем стандарте на один селектор может приходиться только один псевдоэлемент. Так ли уж это мало? Взгляните на пример:

    See the Pen XdmYwm by Ilya Streltsyn (@SelenIT) on CodePen.

    С виду в этом блоке 3 разностилевых блока контента — заголовок, подзаголовок и текст. Но в разметке блок пуст, и весь его контент сгенерирован стилями. Два блока, в начале и конце элемента — понятно, ::before и ::after . Откуда взялся третий?

    А его и нет! Есть лишь первая строка содержимого ::before . Она же — первая видимая строка самого элемента. То есть его ::first-line ! Это стандартное поведение: ::first-line оформляет именно первую видимую строку текста, неважно, настоящего или сгенерированного. Этим можно пользоваться, чтобы разнообразить вид чисто оформительских подписей. А чтобы первая строка кончалась строго там, где нужно, используем маленький хак с символом \A (перенос строки) в тексте в сочетании с white-space:wrap-line (идея, которую давно предложила Лиа Веру, а недавно напомнил Крис Койер).

    Как всегда, не обошлось без ложки дёгтя: Chrome не хотел применять text-transform:uppercase к тексту ::first-line . Хотя по спецификации должен. Это был давний его баг (добавлено 20.12.2020: недавно его исправили, в стабильном 63-м его уже нет), видимо, унаследованный от совсем древнего бага Вебкита. Cамое занятное там происходит при наведении мышкой: у элемента появляются… сразу две «первых строки»! Если display:block задан и для ::before , и для ::after , первая строка подсвечивается у обоих. Это тоже явный баг: по спецификации первая строка выделяется только у одного блочного потомка, на то она и первая. Если нужно блочное (снаружи) поведение для ::after , но не нужна такая хромья самодеятельность, можно поменять ему display:block на flex — для флекс-контейнеров, по спецификации же, ::first-line не применяется. Именно это сделано в примере в обычном состоянии, без наведения.

    Но Firefox и сам не ангел: он вообще не применяет стиль ::first-line , если у ::before стоит display:block (можно увидеть это, наведя на блок мышкой). У него свои «счеты» с псевдоэлементами, не менее давние.

    На следующей картинке видно, как разные браузеры по-разному путаются в пересечении ::first-line и ::before в зависимости от display последнего, в этом примере. Для сравнения там такая же ситуация со span, полным аналогом которого, в теории, должен выступать ::before :

    Только IE11 и Edge справился с ситуацией. Напоминаю, что речь о псевдоэлементах из CSS1-2, без малого 20-летней выдержки! Кто там еще ждет, когда все браузеры начнут одинаково поддерживать флексбоксы?

    Впрочем, иногда, когда по каким-то причинам нельзя влиять на разметку, а кроссбраузерность не критична, это сочетание псевдоэлементов может оказаться весьма кстати. Предельный случай — примеры чего-нибудь интересного на чистом CSS . Вроде нашей прошлогодней мини-игры. Таким нехитрым приемом можно придать ей более эффектную заставку. И даже по-разному анимировать «заголовок» и «текст» (см. чуть обновленный пример, и не забудьте заглянуть в исходник в Firefox).

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

    Несколько минут назад мы выяснили, что псевдоклассы применяются к элементам, а псевдоэлементы — не элементы. Значит, псевдоэлементов со своими псевдоклассами быть не может?

    Я был уверен в этом до прошлого года, когда увидел этот твит Шиме Видаса, ведущего ежедневного дайджеста webplatformdaily.org. Но пример c ::selection:window-inactive действительно работает в «хромоподобных» браузерах — при активации другого окна цвет выделения меняется!

    Я предположил, что такой синтаксис — нововведение CSS Selectors 4, поэтому и работает только в браузерах с его поддержкой. На что Шиме указал мне на удивительную вещь: оказывается, формальной грамматике из CSS Selectors 3 он не противоречит! Действительно, формальное определение «последовательности простых селекторов» не ограничивает числа как псевдоклассов, так и псевдоэлементов, ограничение в один псевдоэлемент на цепочку есть только в текстовом пояснении, а формального запрета на псевдоклассы после псевдоэлементов нет вообще. Практической пользы от этого знания мало, разве что лишнее напоминание о разнице между «валидностью» и «соответствием стандарту» и о том, что не стоит слепо полагаться на валидаторы (хотя сам валидатор CSS на подобную запись как раз ругается). Но приятно чувствовать себя «почти знатоком». А заодно еще большим уважением проникаешься к создателям парсеров и анализаторов CSS, которые вынуждены постоянно это всё распутывать.

    Впрочем, 3-й уровень селекторов вполне можно уже считать устаревшим (помните, что статус рекомендации у W3C означает не «готово, используйте», а скорее «используется так давно, что мы сами уже почти разобрались, как это работает»?:). Давайте снова заглянем в ближайшее будущее:

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

    То есть не для всех и не всегда… но в принципе можно! Но как же правило, что псевдоклассы применяются только к элементам? Можно сказать, что оно осталось в силе, только элементы теперь учитываются не в DOM, а в дереве отрисовки (или «дереве боксов», в терминах спецификации CSS Display 3 уровня).

    Обратите внимание: навешивать на псевдоэлементы можно псевдоклассы только одного типа — для действий пользователя. Варианты вроде ::before:first-child стандарт пока прямо запрещает. С одной стороны, это логично ( nth-* считают элементы в DOM, а псевдоэлементы туда не попадают), с другой — обидно, как от любого ограничения. Зато чуть понятнее, для чего вообще нужна их классификация.

    Впрочем, именно для выделения в неактивном окне спецификация псевдоэлементов недавно предложила отдельный псевдоэлемент ( ::selection-inactive ). Видимо, даже для авторов спецификации псевдокласс для псевдоэлемента — слишком уж радикальное новшество. Зато в браузерах (как минимум, Chrome, Firefox и Edge) успешно поддерживаются состояния для многих псевдоэлементов форм, типа ::-moz-range-track:hover .

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

    Из «незначительного» изменения грамматики CSS, что псевдоэлементы могут быть не только на конце цепочки селекторов, есть и менее очевидные следствия. Как вы думаете, какого цвета будет

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

    Современные браузеры считают, что нет. За исключением Safari 9+ (и iOS 9.3+ Safari) — те радостно красят квадрат зеленым. В браузерах на основе Chromium, где-то в районе 48-й версии, он тоже был зеленым, но с 49-й версии квадрат снова «покраснел». Баг исправили?

    Не всё так однозначно.

    По всем предыдущим стандартам — до действующего модуля селекторов 3 уровня включительно — этот селектор был недопустимым. Даже если запрет выражался лишь в текстовом примечании к формальной грамматике, браузеры вынуждены были его соблюдать. По правилам обработки ошибок в CSS, невалидность селекторов «заразна»: если в списке селекторов затесался хоть один невалидный — отбрасывается всё правило целиком. Именно на этом держатся хаки с дописыванием перед селектором через запятую чего-то вроде x:-moz-any-link или _:-ms-fullscreen , чтобы правило отработало только в каком-то одном браузере.

    Но что, если это текстовое примечание уберут и псевдоэлементу разрешат быть не последним в цепочке?

    Конечно, селектор ::after.test не начнет что-либо выбирать, он останется таким же бессмысленным. Но бессмысленный — не значит недопустимый. Селектор a:not(a) , например, явно бессмысленный и ничего не выбирает — но зато и не нарушает никаких формальных правил, а значит, и не «заражает» невалидностью целое правило. Т.е. правило a:not(a),b полностью работоспособно. А значит, и наше странное правило может стать таким же.

    То, что поведение Safari 9 — не баг, косвенно подтвержается тем, что именно Safari 9 поддерживает больше всего нововведений черновика селекторов 4 уровня. А значит, живет уже по новому стандарту. Опять же — стандарт еще не утвержден, так что всё может измениться. Но полезно знать, что такие перемены в принципе бывают. Особенно при использовании хаков с неочевидным принципом действия: вчерашний баг вполне может обернуться завтрашней фичей, и хак перестанет работать!

    Добавлено 2.01.2020: буквально в новогоднюю ночь Элика Этемад (fantasai) уточнила грамматику CSS-селекторов, и классы для псевдоэлементов однозначно стали недопустимыми. По новой грамматике поведение Safari будет считаться багом, и вскоре его могут пофиксить. Но пока старые версии еще в ходу, стоит быть в курсе этого разночтения!

    ::before и ::after пустых и замещаемых элементов

    Еще одна загадка CSS, над которой давно ломают головы даже знатоки. Казалось бы, раз ::before и ::after добавляются перед и после контента элемента, то для всех пустых элементов (у которых по стандарту не может быть контента) они работать не должны: нет контента — нет и мест для вставки. Но практика часто показывает иное. Может, верна догадка Луиса Лазариса, что псевдоэлементы не работают только для замещаемых элементов? Но почему тогда во многих браузерах работают псевдоэлементы для > — уж он-то однозначно замещаемый?

    Кстати, что такое эти замещаемые элементы, которые даже визуально форматируются по-особому? Удивительно, но однозначного определения в CSS до сих пор нет!

    Изначально (в CSS1) их определяли как «элемент, заменяемый контентом, на который из него указывается». Затем (в CSS2) — как «элемент, для которого движок CSS-форматирования знает лишь внутренние размеры» (именно тогда к замещаемым элементам стали относить поля форм). Наконец, в CSS2.1 — который до последнего времени был актуальным стандартом — как «элемент, чей контент не рассматривается моделью форматирования CSS» (рассматривает ли она контент тех же button> и textarea> , который, вроде бы, вполне слушается как минимум CSS для шрифта — спецификация не уточняла ).

    Так что, видимо, искать глубокую закономерность тут незачем. Всё определяется тем, как эти элементы реализованы в браузерах — т.е. «как исторически сложилось». А сложилось так, что большинство браузеров всё равно замещает такие элементы… вопрос лишь, чем именно:)

    Возьмем для примера пару картинок из вышеупомянутой статьи и рассмотрим их в отладчике Хрома, включив галочку «Показывать теневую DOM браузера»:

    Как видно, загруженная картинка — вещь самодостаточная. А вот у незагруженной внутри «выросло» целое теневое DOM-дерево содержимого — со своей иконкой и отдельным текстовым блоком. А раз есть содержимое — есть и куда вставить псевдоэлементы! Что-то подобное, надо полагать, происходит и в других браузерах (хоть напрямую проверить это там труднее). Если у вас есть другие сведения — прошу поделиться ими в комментариях!

    Но в модуле генерируемого и замещаемого контента CSS3 (2003 г.) было еще одно определение замещаемого: «элемент или псевдоэлемент, у которого вычисленное значение используемой части свойства content оказывается отдельным URI». А это свойство можно было задавать всем элементам. Т.е. силами самого CSS по сути можно было сделать любой элемент замещаемым или незамещаемым! И там же впервые явно утверждалось, что у замещаемых элементов нет ::before и ::after (в других спецификациях их поведение было лишь «не определено»).

    Похоже, когда-то давно в некоторых браузерах (Opera Presto и WebKit) это даже частично поддерживалось. Потом браузеры стали от этого избавляться. Если в iOS 9.2 Safari указание свойства content для еще влияло на отображение псевдоэлементов для картинки, то уже в iOS 9.3 — перестало. И вот недавно этот модуль спецификации обновился — с той же самой формулировкой! Правда, возможности самого свойства content урезали: если сделать незамещаемый элемент замещаемым (заменить картинкой) можно, то наоборот — уже нельзя. Так что возвращать убранное браузерам не придется.

    И еще курьезный факт — собственные запреты не мешают самому W3C в собственных спецификациях стилизовать «отбивку» hr> вот так:

    See the Pen LZVvmy by Ilya Streltsyn (@SelenIT) on CodePen.

    Это работает во всех актуальных браузерах.

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

    В одном из примеров Аны Тюдор (о котором она не так давно подробно рассказывала) в скомпилированном CSS встречается такой селектор:

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

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

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

    Примером такого псевдоэлемента с внутренней структурой текущая версия спецификации приводит ::shadow . Больше нигде в этом модуле такой псевдоэлемент не упоминается. В модуле псевдоэлементов — тоже. Упоминается он только в модуле CSS Scoping 1 уровня — причем только в позапрошлогоднем публичном черновике, из свежего редакторского черновика он пропал. За эти два года сама теневая DOM изрядно изменилась, ну и связанный с ней CSS заодно.

    Так что, похоже, единственный пока псевдоэлемент, у которого могут быть настоящие полноценные потомки (!), остается нестандартным. Хотя по-прежнему работает в Chrome. По логике, раз у чего-то есть контент, то могут быть и генерируемые псевдоэлементы перед и после этого контента… но нет: никакой ::shadow::before у меня так и не заработал, да и по спецификации ::shadow не генерирует никаких боксов, отображаются только сами его потомки. По новой спецификации, правда, специальные места для вставки теневых ветвей — «слоты» — должны вести себя как элементы с display:contents , а псевдоэлементы у таких элементов (там, где он поддерживается, т.е. в Firefox) вполне отображаются. Ведь визуально они — полные аналоги настоящих потомков. Но на старую хромовскую реализацию это, разумеется, уже повлиять не может.

    Так что, как бы ни хотелось мне закончить статью работающим примером псевдоэлемента для псевдоэлемента, на сегодняшний день мне пришлось в этом признать поражение. Но, как мы видели, новые черновики готовят нам массу сюрпризов, и кое-что из того, что прежде казалось немыслимым, уже работает в каком-то из браузеров (пусть за флагом и т.п.). Возможно, найти такой (или еще более невозможный) пример удастся вам? Добро пожаловать в комментарии!

    P.S. Это тоже может быть интересно:

    Если вам понравилась статья, поделитесь ей!

    CSS 4: что новенького?

    Необходимо немедленно оговориться, что опубликованный 29-ого сентября документ носит название «Селекторы уровня 4» (Selectors Level 4). Является ли это черновой спецификацией CSS 4? Понять пока что трудно, хотя некоторые уже успели обозвать документ таким именем.

    Сразу же может возникнуть вопрос: а что, разве CSS 3 закончен, зачем так «гнать»? Напомним, что процесс утверждения новых спецификаций изменился со времен CSS 2.1: вместо единого стандарта третья версия представляет из себя набор документов, называемых модулями. Каждый развивается независимо от второй версии с сохранением обратной совместимости, а затем утверждается в качестве рекомендации. Обычно модули не опираются друг на друга, хотя у некоторых есть зависимости, например, у модулей селекторов и пространства имен.

    Таким образом работа над четвертой версией стандарта может идти параллельно с развитием третьей версии.

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

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

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

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

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

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

    Были добавлены псевдоклассы состояния пользовательского интерфейса из модуля «CSS 3: базовый пользовательский интерфейс». Их значения описывают состояния элементов графического интерфейса: флажок или его отсутствие у чекбокса, обязательность ввода или же нет, :read-write и :read-only — детали, необходимые для конфигурации форм ввода в HTML5. Видимо, было решено собрать в одном модуле всё по селекторам кроме псевдоэлементов.

    Изменения в существующих селекторах

    В CSS 3 псевдокласс отрицания :not может применяться только к простым селекторам: псевдоклассам, тегам, идентификаторам, классам и селекторам параметров. Псевдоэлементы и комбинации такие как ul li или ul>li не поддерживались, а псевдокласс отрицания нельзя было вложить :not(:not(. )) в самого себя.

    Перечисленные ограничения куда слабее в CSS 4: псевдокласс отрицания теперь можно применять к списку селекторов, к сложным селекторам. Псевдоэлементы и вложенные отрицания всё еще запрещены.

    Новые псевдоклассы

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

    Псевдокласс совпадения :matches()

    :matches() очень похож на мозилловский псевдокласс :moz-any() . Его применение оправдано при необходимости выбрать большое число похожих селекторов. К примеру, вместо li a:link, li a:hover, li a:visited, li a:focus достаточно будет указать li a:matches(:link, :hover, :visited) . Комплексные селекторы, вложения и использование :not запрещены.

    Псевдокласс направленности :dir

    Названный псевдокласс позволяет выбрать элемент на основе направления текста. Перечислены значения rtl (справа налево; это арабский язык и иврит) и ltr (слева направо). Другие значения не недействительны, но и их действия не заданы, что в будущем позволит добавлять новые значения (наверное, это будут сверху вниз и снизу вверх).

    Новые псевдоклассы гиперссылок

    Псевдокласс :any-link() указывает на ссылки вне зависимости от их посещенности. Единожды посещенная ссылка (псевдокласс :link ) более непосещенной не считается, поэтому и понадобился ввод подобного элемента, могущего пригодиться при необходимости задания единого стиля обоих состояний. Элемент имеет пометку о возможности выбора лучшего имени.

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

    :local-link указывает на локальные ссылки. При использовании просто :local-link без выражения в круглых скобках он укажет на элемент, который указывает на текущую страницу, то есть на точно соответствующий УРЛ документа без якоря фрагмента. Число в скобках укажет на число совпадающих элементов в УРЛ, например, у документа по ссылке www.example.com/foo/bar/baz a:local-link(0) укажет на ссылки на тот же домен www.example.com , a:local-link(1) — на домен и первый сегмент в УРЛ www.example.com/foo , a:local-link(2) — на домен и два первых сегмента в УРЛ www.example.com/foo/bar .

    Временн́ые псевдоклассы

    Появились три псевдокласса, зависящих от времени: :past , :current и :future , связанные с зависящим от времени воспроизведением или полосой времени, то есть со средствами речевого воспроизведения HTML-документов. Соответственно, :current укажет на обрабатываемый элемент, что дает возможность выделить воспроизводимый сейчас фрагмент, :past укажет на элементы, уже обработанные в прошлом, а :future выделит элементы, которые будут обработаны в будущем. У :current есть версия, которая принимает значения в скобках.

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

    В документе описаны два новых подобных псевдокласса: :nth-match и :nth-last-match , входные значения которых совпадают с :nth-child и :nth-last-child : те же выражения an+b, а также ключевые слова или строка селектора, которая позволяет выбрать подмножество результатов. Из спецификации понять задумку не так легко, как на примере. Предположим, что существует селектор button:nth-match(even of .active) . Он в отличие от button:nth-child(even) сначала определит подмножество элементов с классом active , а уже потом отделит четные элементы.

    Псевдоклассы структуры таблицы

    Это :column() , :nth-column() и :nth-last-column . В HTML клетки перечисляются подряд и разделяются тэгом tr , а отношение клетки к колонке подразумевается порядком перечисления. Поэтому, чтобы задать стиль клетки на основе принадлежности её к колонке, вводится псевдокласс :column , который может применяться к одному или нескольким селекторам. Следующий пример из черновика задаст желтый цвет клеток C , E и D :

    Черновые :nth-column() и :nth-last-column принимают аргументы так же, как уже существующие :nth-child или :nth-last-child , а то есть числовые значения, выражения вида an+b , значения even и odd . К примеру, :nth-column(odd) выберет все ячейки, принадлежащие нечетным колонкам.

    Селектор предка или объектный селектор

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

    Свойства CSS всегда применялись к последнему элементу в списке: ul li.selected укажет на элементы в списке, обладающие классом selected. Но нет никакой возможности задать стиль целого списка, основываясь на свойствах вложенных в него элементов.

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

    Предположим, возникла необходимость задать стиль списка, в котором есть элемент с классом selected . Объектный селектор легко позволит сделать это:

    $ul li.selected <
    background: white;
    >

    Таков текущий черновик документа «Селекторы уровня 4», состояние которого может и будет претерпевать значительные изменения, а понять весь смысл отдельных фрагментов пока ещё затруднительно.

    Взгляд в будущее: CSS4

    Набирающее популярность понятие CSS4, на самом деле, взялось из ниоткуда, точно так же, как мы в своё время привыкали к реальности CSS3, который-таки будет с нами ещё некоторое время (на самом деле ещё долгое время). Производители браузеров прилагают огромные усилия для реализации передовых функций стандарта, а «фронтэндщики» (фронтэндеры?) создают новые и новые инструменты для более эффективной работы с таблицами стилей. Но сейчас, слыша о CSS4, вы думаете: «Эй, а что там насчет CSS3? Он ещё жив?»

    Мы все долго и упорно работали, и в конце концов дошли до использования CSS3 в реальных проектах, а теперь он просто устарел? «Конечно же нет!» — отвечу я. Всё это – результат эволюции, который только поможет всему CSS в целом, потому что и «Уровень 3», и «Уровень 4» — просто определения, скрывающие за собой набор документов спецификации.

    Зачем нам 4 уровень? Что слышно о CSS3?

    «4 Уровень» – это просто номер документа W3C. Вы слышали что-нибудь о новых спецификациях «Фильтров с Эффектами, 1 Уровня»? Куда они подевались? В CSS3? Может, в CSS4? А может в CSS1, потому что там фигурирует «Уровень 1»? Всё это вообще не важно, потому что CSS – это просто CSS. Селекторы являются первым документом, для достижения четвертого уровня спецификации, который всё ещё находится в разработке. Каждый документ там — сам по себе, если дело касается номера спецификации. Они разрабатываются независимо друг от друга.

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

    CSS3 постигнет учесть HTML5: и я имею ввиду не конкретную версию, а язык в целом. HTML5, по факту, просто следующая версия языка разметки, в которую добавили поддержку новых элементов. Но когда люди говорят о нем, они могут иметь ввиду всё, что угодно: начиная от аудио API и Веб Сокетов, и заканчивая геолокацией (которая, кстати, вообще не входит в HTML5 спецификацию).

    То же самое касается и CSS3: для некоторых он выглядит как волшебство, которое мы применяем для создания современных демо страниц. Вы не обязаны знать к чему принадлежит спецификация border-radius или box-shadow , если умеете правильно их использовать. Аналогичная ситуация и с новыми селекторами, это просто другая (следующая) версия «Селекторной» спецификации.

    Что же такое Селекторы?

    В спецификации селекторы описаны как шаблоны, которые соответствуют элементам DOM дерева. Большинство селекторов из «4 Уровня» являются псевдо-классами. Селекторы появились с самого начала существования CSS, и продолжают успешно существовать на «4 Уровне», при этом получая множество новых интересных дополнений. Давайте же перейдем к практике и посмотрим, что там интересного. Я не буду описывать весь документ – только новшества «4 Уровня».

    Логические комбинаторы: :matches, :not

    Начнём, пожалуй, с логических псевдо-классов. Первый из них: :matches, скорее всего, известный тебе ранее как :-moz-any() от компании Mozilla , был внедрен ещё в Firefox 4. Благодаря этому селектору, мы можем группировать и находить элементы в CSS документе. Зачем это нужно? Ну, например, если нам необходимо собрать несколько ссылок «одним махом».
    Вместо такого:

    можно написать так:

    Просто, не правда ли? Несмотря на то, что этот пример выглядит простовато, он показывает потенциальные возможности псевдо-класса :matches и может быть использован в более сложных ситуациях:

    Второй селектор, который мы рассмотрим, на самом деле, был введен ещё в CSS3, но по настоящему мощным стал на «4 Уровне». Я имею ввиду псевдо-класс :not, который теперь может принимать список селекторов в качестве параметра:

    Этот код будет делать красным все параграфы не имеющие классов: .active или . visible .

    Псевдо-классы для обработки ссылок: :any-link и :local-link

    Благодаря этим псевдо-классам, мы будем иметь больше контроля над стилями ссылок. Первый: :any-link (временное имя, может быть изменено) – объединяет определения a:link и a:visited в одно так, что вам не придется писать:

    Теперь не важно, является ли ссылка посещенной или нет. У неё будет стиль обычной ссылки:

    Второй псевдо-класс :local-link — более интересен. Им можно, к примеру, дать свой стиль ссылке, указывающей на вашу личную страницу, оставив все остальные ссылки нетронутыми:

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

    Это правило будет применено ко всем внешним ссылкам. (Можно добавить к ним, скажем, иконку или фоновое изображение по вашему желанию)

    Как можно видеть, в этом последнем примере :local-link используется с параметром. Число в скобках определяет часть в URL пути, по которому будут происходить сопоставление каждой найденной ссылки.
    Звучит немного непонятно, но всё проще, чем кажется:

    Предположим, что текущий адрес страницы: end3r.com/2012/10/20/some-title , и у вас есть следующие ссылки в меню:

    • Home [http://end3r.com/]
    • 2012 [http://end3r.com/2012/]
    • October 2012 [http://end3r.com/2012/10/]
    • 20 October 2012 [http://end3r.com/2012/10/20/]
    • Article [http://end3r.com/2012/10/20/some-title/]

    Первая ссылка будет красной, вторая зеленой, третья синей, четвертая – желтой, а пятая – серой.

    Время-определяющие псевдо-классы: :past, :current, :future

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

    Этот код подсвечивает озвучиваемые слова желтым фоном.
    Второе применение – это оформление субтитров для WebVTT видео формата. Можно, например, менять цвет или любые другие свойства. Псевдо-классы :past и :future, как можно догадаться, относятся к элементам, которые были озвучены ранее, и которые будут озвучены следующими.

    Псевдо-класс неопределенного состояния: :indeterminate

    В то время, как к оформлению элементов форм может быть применено множество полезных псевдо-классов, таких как: :enabled , :disabled или :checked , есть один новый: :indeterminate . Как всем известно, флажки и переключатели могут иметь два состояния: установлен и не установлен. Каждое состояние может быть определено псевдо-классами :checked — для установленного и :not(:checked) — для не установленного. Но что, если вы хотите оформить элемент, который ещё не был использован. По факту, у него не может быть определено ни состояние установлен, ни состояние не установлен. В некоторых случаях это бывает полезным, например, чтобы напомнить пользователю, что он что-либо пропустил. Таким образом, мы может стилизовать элементы, которые ещё не использовались и не имеют состояния по умолчанию:

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

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

    Псевдо-классы для древовидных структур: :nth-match, :nth-last-match

    Эти псевдо-классы впервые появились в «4 Уровне», и они очень интересны. Используя :nth-match , вы можете добиться намного больших возможностей, чем когда-либо ранее. Любопытно, как он работает? Окей, представьте, что я возьму псевдо-класс nth-child, который выбирает элементы и объединю его с мощью псевдо-класса :matches , и вы получите ответ на свой вопрос.

    Пусть у вас есть список ссылок, некоторые из которых имеют класс .active, и вы хотите выбрать только четные ссылки с этим классом. Мы можем использовать nth-child(even) для выборки четных элементов, но этого недостаточно, ведь нам нужны ссылки с классом .active. Не подходит и :matches(.active) , т.к. в этом случае мы выбираем вообще все ссылки с классом .active. В этом случае нам и поможет :nth-match :

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

    Эта комбинация селекторов ищет элементы, используя более сложное выражение. Псевдо-класс работает так же, как и :nth-match, но начинает поиск с конца DOM дерева.

    Псевдо-классы: :column, :nth-column, :nth-last-column

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

    Этот небольшой код устанавливает красный фон каждой ячейке с классом .total, находящейся в одной колонке, и синей каждой ячейке, находящейся в каждой четной колонке таблицы.
    Теперь, мы можем выбирать столбцы точно так же, как и строки, даже используя безумные правила типа: :nth-column(3n+2). Только помните, что колонки оформляются на основе следования их в DOM дереве, а не так, как они отображаются на странице. Разумеется, не только таблицы, в конечном счете, выиграют от этих псевдо-классов, колоночные макеты уже на подходе.

    Родительский (дочерний) селектор:

    Этот селектор почти как Швейцарский Армейский нож, которого очень ждали, и вот он здесь. Самая обсуждаемая новинка в «Селекторной» спецификации «4 Уровня» даст вам невиданную ранее мощь в работе с CSS. Благодаря этому селектору, можно очень легко оформлять элементы, не добавляя им классы или идентификаторы. Такая особенность может быть супер-полезной при оформлении, например, меню, в котором нет никаких классов в разметке для идентификации элементов.

    Давайте посмотрим на это в действии, используя некоторые базовые примеры. Пусть, у нас есть меню, состоящие из списка простых ссылок. Мы хотели бы оформить его, но оно полностью генерируется на серверной стороне на php, и у нас нет доступа к коду. Проблема возникнет, когда мы захотим оформить элемент li активного пункта меню, при том, что класс .active будет не у элемента li, а у самой ссылки. Известная проблема, не так ли? В такой ситуации самый просто путь – это перенести класс, отвечающий за активный пункт, с ссылки на элемент li. Но нам это не подходит, т.к. доступа к серверному коду у нас нет.

    В нормальной структуре описания правил CSS, те или иные свойства применяются к последнему элементу. В правиле ul li a.active — это будет ссылка с классом .active, которая находится в элементе li, который находится в элементе ul. В правиле p span – это будет элемент span, который находится внутри элемента p, и т.д. Благодаря родительскому селектору, такой порядок может быть нарушен:

    Теперь, мы можем оформить элемент li, даже если активный класс будет у его ребенка. При добавлении родительского сектора к элементу, мы говорим, что хотим оформить именно его, а не последний элемент.
    Другой пример: можно изменить фон страницы, просто добавив ссылку с определённым классом в любое место:

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

    Примечание: Первая редакция спецификации (от 29 сентября 2011) определяла родительский селектор знаком доллара, стоящим перед элементом ($li). Текущая редакция (от 22 июня 2012) использует другой синтаксис, в котором используется восклицательный знак, стоящий после элемента (li!). Разумеется, всё может поменяться еще не раз. Важно то, что рано или поздно финальная спецификаций выйдет, и данный вопрос будет закрыт. А уж какой у неё будет синтаксис, по сути, не так важно, главное правильная работа.

    Чтобы увидеть родительский селектор в действии, воспользуйтесь jQuery плагином cssParentSelector .

    Резюме:

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

    Текущее состояние документа

    На данный момент, «4-му Уровню Селекторов» все ещё далеко до своей финальной точки. Одни правила постоянно меняются, другие добавляются, третьи убираются. Нет никакой возможности ориентироваться на этот документ сегодня, ибо он изменится ещё не один раз. Но есть и плюсы: вы можете принять участие в обсуждении и предлагать свои идеи уже сейчас. Любая интересная идея может быть добавлена в стандарт и, в итоге, стать частью финальной спецификации.

    Поддержка браузерами

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

    Другие спецификации «4 Уровня»

    Существует ещё парочка новых документов:

    • CSS4 Media Queries
    • CSS4 Background
    • CSS4 Images
    • CSS4 Text

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

    Ресурсы:

    Первым и, безусловно, самым интересным является: официальная W3C документация для «Селекторов 4 Уровня». Только помните о том, что она всё ещё разрабатывается. Вы так же можете посмотреть несколько интересных статей от David Storey — члена рабочей группы W3C.

    CSS/Псевдо-элементы и Псевдо-классы

    В CSS в качестве селекторов могут применяться псевдо-классы и псевдо-элементы.

    Псевдо-классы [ править ]

    Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками ( :link , :visited , :hover , :active , :focus ).

    В CSS2 определены ещё 2 псевдо-класса:

    :first-child — первый дочерний элемент.

    :lang(language) — язык фрагмента документа.

    Остальные псевдо-классы относятся к CSS3. Примеры некоторых из них:

    :last-child — последний дочерний элемент.

    :first-of-type — первый дочерний элемент заданного типа.

    :last-of-type — последний дочерний элемент заданного типа.

    :nth-child(n) — n-дочерний элемент.

    :nth-last-child(n) — n-дочерний элемент, отсчёт ведётся с конца.

    :nth-of-type(n) — n-дочерний элемент заданного типа.

    :nth-last-of-type(n) — n-дочерний элемент заданного типа, отсчёт ведётся с конца.

    :not(selector) — стилизация элементов, которые не содержат заданный селектор.

    Псевдо-элементы [ править ]

    Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа ( :first-letter , :first-line ), а также позволяют генерировать и стилизировать несуществующее содержимое ( :before , :after и свойство content ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: ( ::first-letter , ::first-line , ::before , ::after ).

    В CSS3 также был (до 2008 года) псевдо-элемент ::selection . Он стилизует выделенный пользователем текст. Браузеры Mozilla Firefox и SeaMonkey поддерживают нестандартный псевдо-элемент ::-moz-selection .

    CSS Pseudo-classes

    Что такое псевдо-классы?

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

    Например, он может быть использован для:

    • Стиль элемента, когда пользователь наносит на него указатель мыши
    • Стиль посещенных и непосещенных ссылки по-разному
    • Стиль элемента, когда он получает фокус

    Синтаксис

    Псевдо-классы привязки

    Ссылки могут отображаться различными способами:

    Пример

    /* unvisited link */
    a:link <
    color: #FF0000;
    >

    /* visited link */
    a:visited <
    color: #00FF00;
    >

    /* mouse over link */
    a:hover <
    color: #FF00FF;
    >

    /* selected link */
    a:active <
    color: #0000FF;
    >

    Примечание: a:hover Должны прийти после a:link и a:visited в CSS определение для того, чтобы быть эффективным! a:active Должны прийти после a:hover в CSS определение для того, чтобы быть эффективным! Имена псевдо-классов не чувствительны к регистру.

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

    Псевдо-классы могут сочетаться с классами CSS:

    При наведении указателя мыши на ссылку в примере она изменит цвет:

    Пример

    Наведите курсор на

    Пример использования псевдо-класса :hover в элементе

    Пример

    Простая подсказка Hover

    Наведите указатель мыши на элемент

    (например, всплывающая подсказка):

    Пример

    p <
    display: none;
    background-color: yellow;
    padding: 20px;
    >

    div:hover p <
    display: block;
    >

    CSS-: первый-ребенок псевдо-класс

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

    Соответствие первому элементу

    В следующем примере селектор соответствует любому элементу

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

    Пример

    Сопоставление первого элемента во всех

    В следующем примере селектор соответствует первому элементу во всех элементах

    Пример

    Сопоставить все элементы во всех первых дочерних элементах

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

    элементы, являющиеся первыми дочерними элементами другого элемента:

    Пример

    CSS-The: lang псевдо-класс

    :lang псевдо-класс позволяет определить специальные правила для разных языков.

    В приведенном ниже примере :lang определяет кавычки для элементов с lang = «No»:

    Пример

    Some text A quote in a paragraph Some text.

    В чем разница между псевдоклассом и псевдоэлементом в CSS?

    Такие вещи, как a:link или div::after .

    Информация о различии кажется скудной.

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

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

    Официальное описание

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

    Псевдокласс всегда состоит из «двоеточия» ( : ), за которым следует имя псевдокласса и, необязательно, значением между круглыми скобками.

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

    Что это значит?

    Важная природа псевдоклассов изложена в самом первом предложении: «концепция псевдокласса [. ] разрешить выбор«. Это позволяет автору таблицы стилей различать элементы на основе информации, которая «лежит за пределами дерева документа», например, текущего состояния ссылки ( :active , :visited ). Они не сохраняются нигде в DOM, и для доступа к этим параметрам не существует интерфейса DOM.

    С другой стороны, к :target можно получить доступ с помощью DOM-манипуляции (вы можете использовать window.location.hash для поиска объекта с помощью JavaScript), но это «не может быть выражено с помощью других простых селекторов».

    Пример

    Следующий пример будет окрашивать все четные строки серым ( #ccc ), все неравномерные строки, которые не могут быть разделены на 5 белых и каждый другой пурпурный ряд.

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

    Официальное описание

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

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

    Эта нотация :: вводится текущим документом, чтобы установить дискриминацию между псевдоклассами и псевдоэлементами. Для совместимости с существующими таблицами стилей пользовательские агенты также должны принимать предыдущую однотопливную нотацию для псевдоэлементов, введенных в CSS-уровнях 1 и 2 (а именно: first-line,: first-letter, before и: after). Эта совместимость не допускается для новых псевдоэлементов, представленных в этой спецификации.

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

    Примечание. Будущая версия этой спецификации может допускать множественные псевдоэлементы на селектор.

    Что это значит?

    Самая важная часть здесь заключается в том, что «псевдоэлементы позволяют авторам ссылаться на [..] в противном случае недоступную информацию» и что они «также могут предоставить авторам возможность ссылаться на контент, который не существует в исходном документе (например, псевдо-элементы ::before и ::after предоставляют доступ к сгенерированному контенту)». что они фактически создают новый виртуальный элемент, к которому могут применяться правила и даже псевдосекторные селекторы. Они не фильтруют элементы, они в основном фильтруют контент ( ::first-line , ::first-letter ) и переносят его в виртуальный контейнер, который автор может создать, однако, он хочет (ну, почти).

    Например, псевдоэлемент ::first-line не может быть восстановлен с использованием JavaScript, так как он сильно зависит от текущего шрифта, размера шрифтов, ширины элементов, плавающих элементов (и, вероятно, времени суток). Что ж, это не совсем так: все еще можно вычислить все эти значения и извлечь первую строку, однако это очень громоздкая деятельность.

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

    Пример

    В следующем примере будет добавлен языковой тег для каждой цитаты на данной странице с использованием псевдокласса :lang и псевдоэлемента ::after :

    TL; DR

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

    Ссылки

    • Селекторы Уровень 3
      • 4. Синтаксис селектора
      • 6.6 Псевдоклассы
      • 7. Псевдо-элементы
    • CSS 2.1 Спецификация (устаревшая, но все же информативная)
      • 5.2 Синтаксис селектора:

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

        Псевдоклассы фильтруют существующие элементы.
        a:link означает все , которые :link .

        Псевдоэлемент — это новый поддельный элемент.
        div::after означает несуществующие элементы после

        ::selection — еще один пример псевдоэлемента.
        Это не означает все элементы, которые выбраны; это означает диапазон содержимого, который выбран, который может охватывать части нескольких элементов.

        Краткое описание, которое помогло мне понять разницу:

        • Псевдоклассы описывают специальное состояние.
        • Псевдоэлементы соответствуют виртуальным элементам.

        В документах Sitepoint:

        A псевдокласс похож на класс в HTML, но его явно не указывается в разметке. Некоторые псевдоклассы являются динамическими-theyre, применяемыми в результате взаимодействия пользователя с документом. — http://reference.sitepoint.com/css/pseudoclasses. Это будут такие вещи, как :hover, :active, :visited .

        Псевдоэлементы соответствуют виртуальным элементам, которые не существуют явно в дереве документов. Псевдоэлементы могут быть динамическими, поскольку виртуальные элементы, которые они представляют, могут меняться, например, при изменении ширины окна браузера. Они также могут представлять контент, созданный правилами CSS. — http://reference.sitepoint.com/css/pseudoelements. Это будут такие вещи, как before, :after, :first-letter .

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

        Псевдо-класс — это способ выбора определенных частей документа HTML, основанный в принципе не на самом документе HTML-документа и его элементах, так и на характеристиках, таких как имя, атрибуты или содержимое, но на других условиях phantom, таких как язык кодирование или динамическое состояние элемента.

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

        ОГРАНИЧЕНИЯ: В отличие от псевдоэлементов, псевдоклассы могут появляться в любом месте цепочки селекторов.

        Пример кода псевдокласса:

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

        PSEUDO-ELEMENTS используются для адресации частей. Они позволяют устанавливать стиль на части содержимого элемента, кроме того, что указано в документах. Другими словами, они позволяют определять логические элементы, которые фактически не находятся в дереве элементов документа. Логические элементы позволяют использовать подразумеваемую семантическую структуру в селекторах CSS.

        ОГРАНИЧЕНИЯ: Псевдоэлементы могут применяться только к внешним и документальным контекстам, а не к строковым стилям. Псевдоэлементы ограничены тем, где они могут отображаться в правиле. Они могут появляться только в конце цепочки селектора (после объекта селектора). Они должны появляться после любых имен классов или идентификаторов, найденных в селекторе. На каждый селектор может быть указан только один псевдоэлемент. Чтобы адресовать несколько псевдоэлементов в одной структуре элемента, необходимо сделать несколько инструкций селектора/декларации стиля.

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

        /* Следующее правило выбирает первую букву заголовка 1 и устанавливает шрифт в 2em, cursive, с зеленым фоном. Первая буква выбирает первую визуализированную букву/символ для элемента уровня блока. */

        Топ-пост этого месяца:  Как прикрепить файл для пользователя
  • Добавить комментарий