CSS selector, особенности спецификации level 4 одиночные и двойные двоеточия, псевдоклассы и


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вышеуказанный код обозначает, что при наведении (hover) на ссылку, то есть элемент a ( ) цвет текста ссылки (color) будет чёрным.

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

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

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

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

hover — при наведении курсора на элемент
focus — при клике на элемент, например поле для ввода данных
active — при активации элемента пользователем, то есть в момент клика
link — стиль для не посещённых ссылок
visited — стилевое оформление к посещенным ссылкам
target — переход к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
root — определение корневого элемента документа
indeterminate — стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
checked — стиль для radio и checkbox в выбранном положении: input:checked
firstchild — стиль для первого дочернего элемента селектора
lastchild — изменения в последнем элементе родителя
onlychild — для дочерних элементов, единственных у родителя
lang (en) — определение языка элемента, где en выбранный язык

Код CSS Примеры

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

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

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

after — добавление контента ПОСЛЕ указанного элемента
before — добавление контента ДО указанного элемента
firstletter — стили для первой буквы в контенте элемента
firstline — стилевое оформление первой строки текста в элементе
selection — применение стилей при выделении текста в элементе

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

Также при помощи уже after можно добавить слова после указанного класса. Например, слово Далее или Авторскую подпись.

Обязательно проверьте работу псевдоклассов и псевдоэлементов! Это увлекательно)
Спасибо за внимание!

Сложные селекторы

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

Селекторы атрибутов

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

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

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

В CSS селекторы атрибутов можно указать с конкрентым значением атрибута. Для этого пишется атрибут, затем без пробелов знак =, затем в кавычках нужное значение. Пример:

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

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

link — непосещённая ссылка

visited — посещённая ссылка

active — активный элемент, то есть элемент, на котором нажата кнопка мыши. Элемент является активным, только пока кнопка нажата

focus — элемент находится в фокусе. Используется для элементов формы

hover — указатель мыши находится над элементом

lang(язык) — элемент с атрибутом lang , имеющим значение, указанное в скобках

first-of-type — первый элемент родительского элемента

last-of-type — последний элемент родительского элемента

only-of-type — единственный элемент родительского элемента

nth-of-type(n) — элемент, который идёт n по счёту родительского элемента

nth-last-of-type(n) — элемент, который идёт n по счёту родительского элемента, считая от последнего элемента

root — корневой элемент документа

empty — пустой элемент

enabled — включенный элемент

disabled — выключенный элемент

checked — выбранный элемент

not(селектор) — все элементы, кроме указанного

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

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

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

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

first-letter — первый символ элемента

first-line — первая строка элемента

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

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

Существует ещё два псевдоэлемента, которые работают совсем по-другому. Они добавляют контент элементу.

before — добавляет контент перед основным контентом

after — добавляет контент после основного контента

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

Комбинаторы

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

Комбинатор Правило
> Стиль будет применёт ко второму селектору, если он непосредственно вложен в первый селектор
+ Стиль будет применён ко второму селектору, если он следует сразу после первого селектора
Стиль будет применёт ко второму селектору, если он находится перед первым селектором

По сути, пробел тоже является комбинатором, который устанавливает обычные правила работы составного селектора

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

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

Коприрование материалов сайта возможно только с согласия администрации

Задачи на работу с псевдоклассами и псевдоэлементами CSS

Учебник HTML CSS

Практика

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

Практика

Адаптив

Продвинутые вещи

Практика

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На first-letter

Повторите страницу по данному по образцу:

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

На first-line

Повторите страницу по данному по образцу:

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

На selection

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

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

На placeholder

Повторите страницу по данному по образцу (поставьте курсор в инпут и попробуйте что-нибудь ввести):

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

На focus

Повторите страницу по данному по образцу (поставьте курсор в инпут и посмотрите как он себя поведет — это и надо повторить):

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

На after, before, content

Повторите страницу по данному по образцу (в начале каждого абзаца средствами CSS вставлен текст «Начало:», а в конце — «:конец!»):

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

Повторите страницу по данному по образцу (в начале каждого абзаца средствами CSS вставлен текст, в начале он покрашен в красный цвет, а в конце — в зеленый):

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

На counter-increment

Повторите страницу по данному по образцу (в начале каждого абзаца вставлена автоматическая нумерация «Абзац №число. «):

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

Повторите страницу по данному по образцу (нумерация начинается с 8-ми):

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

Повторите страницу по данному по образцу (в середине нумерация начинается с начала):

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

Повторите страницу по данному по образцу (в середине нумерация имеет разрыв):

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

На nth


Повторите страницу по данному по образцу (первый li покрашен в красный цвет, а последний — в зеленый):

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

Повторите страницу по данному по образцу (третий li покрашен в красный цвет):

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

Повторите страницу по данному по образцу (четные li покрашены в зеленый цвет, нечетные — в красный):

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

Повторите страницу по данному по образцу (каждая третья li покрашена в красный цвет):

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

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

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

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

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

На checked

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

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

На disabled, enabled

Повторите страницу по данному по образцу (незаблокированный инпут светится зеленой тенью, а заблокированный — красной):

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

На empty

Повторите страницу по данному по образцу (пустая li имеет маркер и границу):

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

На not

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

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

Повторите страницу по данному по образцу (все li, кроме первой, покрашены в красный цвет):

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

Повторите страницу по данному по образцу (все li, кроме третьей, покрашены в красный цвет):

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

На lang

Повторите страницу по данному по образцу:

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

На target

Повторите страницу по данному по образцу (при переходе по ссылке будет подсвечиваться соответствующий блок):

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

лабы по информатике, егэ

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

CSS урок 5. Медиа-запросы. Псевдоклассы и псевдоэлементы CSS

Медиа-запросы в CSS

Медиа-запросы — логическое выражение, которое может быть равно истине (true) или лжи (false)

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

Медиа-запрос записывается либо в стилевом файле, либо во вложенном стиле и имеет следующую структуру:

all — все устройста. Может быть screen | print | tv

max-width — медиа функция, которая может задавать параметры указанного устройства или разрешение экрана

В примере устройство с максимальным разрешением экрана — 480px и с минимальным — 320px:

Из примера видно, что функции могут содержать логические условия: AND — И, NOT — НЕ и ONLY — только

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

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

Три псевдокласса определены именно для гиперссылки (для тега a):

a:link <. >/* для ссылки непосещенной */ a:visited <. >/* для посещенной ссылки */ a:active <. >/* для активной ссылки, в момент щелчка */

* active — псевдокласс не только для гиперссылки

элемент:hover <. >/* по наведению курсора на элемент */

input:focus <. >/* в тот момент, когда элемент получает фокус */ input:active<. >/* в момент активации элемента */

CSS selector, особенности спецификации 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: псевдоэлементы и псевдоклассы

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

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

На этой странице

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

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited ), состояние содержимого (вроде ), checkbox ( ) или option ( внутри ), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.’> :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

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

Синтаксис

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

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

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

/* The first line of every

Syntax

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

Index of standard pseudo-elements

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element::pseudo-element

Псевдоэлементы CSS это своего рода условные составные части уже существующих html тегов.

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

Как пользоваться селекторами псевдоэлементов CSS?

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

Задается он при помощи двуеточия после которого следует название используемого псевдоэлемента.

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

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

p: first- line span

Какие бывают псевдоэлементы?

Подводя итоги

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

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

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

Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия — «:: «:

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

Примечание: каждый селектор может содержать только один псевдо-элемент, который должен быть определен в самом конце селектора: #header .menu span::first-letter

Псевдо-элемент::first-letter

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

Сложные селекторы

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

Селекторы атрибутов

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

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

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

В CSS селекторы атрибутов можно указать с конкрентым значением атрибута. Для этого пишется атрибут, затем без пробелов знак =, затем в кавычках нужное значение. Пример:

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

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

link — непосещённая ссылка

visited — посещённая ссылка

active — активный элемент, то есть элемент, на котором нажата кнопка мыши. Элемент является активным, только пока кнопка нажата

focus — элемент находится в фокусе. Используется для элементов формы

hover — указатель мыши находится над элементом

lang(язык) — элемент с атрибутом lang , имеющим значение, указанное в скобках

first-of-type — первый элемент родительского элемента

last-of-type — последний элемент родительского элемента

only-of-type — единственный элемент родительского элемента

nth-of-type(n) — элемент, который идёт n по счёту родительского элемента

nth-last-of-type(n) — элемент, который идёт n по счёту родительского элемента, считая от последнего элемента

root — корневой элемент документа

empty — пустой элемент

enabled — включенный элемент

disabled — выключенный элемент

checked — выбранный элемент

not(селектор) — все элементы, кроме указанного

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

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

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

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

first-letter — первый символ элемента

first-line — первая строка элемента

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

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

Существует ещё два псевдоэлемента, которые работают совсем по-другому. Они добавляют контент элементу.

before — добавляет контент перед основным контентом

after — добавляет контент после основного контента

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

Комбинаторы

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

Комбинатор Правило
> Стиль будет применёт ко второму селектору, если он непосредственно вложен в первый селектор
+ Стиль будет применён ко второму селектору, если он следует сразу после первого селектора
Стиль будет применёт ко второму селектору, если он находится перед первым селектором

По сути, пробел тоже является комбинатором, который устанавливает обычные правила работы составного селектора

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

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

Коприрование материалов сайта возможно только с согласия администрации

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