Псевдокласс in-range в CSS

Содержание

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

Помимо CSS селекторами рассмотрим псевдоклассы.

a :hover < color: #333333; >
селектор :псевдокласс свойство значение

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

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

Теперь вспомним о хэш-ссылках. Тег a также можно вынести за пределы div.

Для элементов формы, таких как input, select и textarea

Помимо :checked есть ещё :indeterminate. Но он может найти своё применение разве что с помощью jQuery (автор). А вместо остальных можно применить селектор с соответствующим атрибутом.

в теге есть атрибут в теге отсутствует атрибут описание атрибута
:read-only [readonly] :read-write :not([readonly]) не может изменяться пользователем
:required [required] :optional :not([required]) обязательное для заполнения
:disabled [disabled] :enabled :not([disabled]) недоступным для активации, не может получить фокус

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

Пропускаю :root в связи с его заменой на html.

:nth-last-child действует аналогично, только подсчёт ведёт от последнего элемента.

:nth-last-of-type действует аналогично :nth-of-type, только подсчёт ведёт от последнего элемента.

Разницу между :first-child (см. первый пример Структурных псевдоклассов) и :first-of-type, :last-child и :last-of-type, :only-child и :only-of-type в отображении браузерами я не увидела.

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

12 комментариев:

Светлана Ковалева Спасибо, Наталья, интересные вещи! NMitra Статью еле осилила.) Старалась и наглядно и как-то классифицировать всю эту красоту. ключевой Я новичек, при чем самый самый. При всей раскладке информации понял лишь не много. Куда эти ссылки вставлять в какой период времени или когда? В общем мне нравится эта тема и даже очень. Открыв Блог Hallucinatio в течении месяца ищу, как быть с Adsensee, FeedBurner и т.д., а особенно рекламой.Думаю найти у Вас помощь, а то «тысячники» одолели мой @mail и все без толку, только лишние деньги выкинул, даже попадал на диски с замками (ключ где то в Америке).Наверно такие и зарабатывают на чайниках, но они не учли маркетинговой части этого вопроса. У меня могут быть друзья и знакомые, которые то же ищут эту информацию за денежный эквивалент. В общем спасибо. NMitra Я затрудняюсь в ответе на ваш комментарий. Указанные выше коды — это основы CSS, которые я сама недавно для себя прояснила, а не маркетинговые исследования. Их не обязательно вам изучать сразу. Думаю, сначала стоит систематизировать информацию и убрать нижний скроллинг.

Откройте сообщения, нажмите вкладку «HTML» и в тело статьи добавьте код. Вместе с тегом style. Сначала потренируйтесь так. Russian Top Blogspot Привет, этот пост попал в Топ каталога Russian Top Blogspot NMitra Спасибо, мне очень приятно Анонимный Добрый день ! не подсажете, может ли один див меняться (например цвет) при наведении на другой ?

что то вроде того , но это не работает :)
NMitra Можно, посмотрите ещё тему про селекторы http://shpargalkablog.ru/2011/10/css-selectors.html

Этот вариант работает, если блоки стоят на одном уровне, тот что вы написали — один блок #delta1 вложен в другой #delta2

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

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

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

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

Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.

Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33. Рассмотрим все детально.

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

  1. :link — отвечает за стили непосещенной ссылки;
  2. :hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
  3. :active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
  4. :visited — состояние посещенной ссылки;
  5. :focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
  6. :first-child — первый дочерний элемент текущего элемента;
  7. :last-child — соответственно, последний дочерний элемент чего-то;
  8. :only-child — применяет стиль к элементу, если он единственный дочерний элемент;
  9. :nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
  10. :nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);
  11. :lang() — если у элемента указан язык (с помощью атрибута lang, например lang=»en»), то этот элемент можно выбрать так;
  12. :root — дает указание применить стиль к корневому элементу (в html документе это тег );
  13. :not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не

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

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

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

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

Gecko
(Firefox)
Trident
(IE)
Webkit
(Chrome/Safari)
Presto
(Opera)
:link 1.0 3.0 85 7.0
:visited 1.0 3.0 85 7.0
:active 1.0 Нет 85 7.0
:hover 1.0 7.0 419.3 7.0
:focus 1.0 8.0 Yes 7.0
:first-child 1.0 7.0 85 7.0
:lang() 1.2 8.0 525 7.5
:root 1.0 Нет 85 9.5
:not() 1.0 Нет 85 9.5
:empty 1.8 Нет 412 9.5
:first-of-type 1.9.1 Нет 525 9.5
:last-child 1.0 Нет 525 9.5
:last-of-type 1.9.1 Нет 525 9.5
:only-child 1.8 Нет 525 9.5
:only-of-type 1.9.1 Нет 525 9.5
:nth-child 1.9.1 Нет 525 9.5
:nth-last-of-type 1.9.1 Нет 525 9.5
:nth-last-child 1.9.1 Нет 525 9.5
:nth-of-type 1.9.1 Нет 525 9.5
:target 1.3 Нет 525 Частично
:enabled 1.8 Нет 525 9.0
:disabled 1.8 Нет 525 9.0
:checked 1.0 Нет 525 9.0
:indeterminate 1.9.2 Нет 522 Нет
:default 1.9 Нет Нет 9.0
:valid 1.8 Нет Нет 9.0
:invalid 1.8 Нет Нет 9.0
:in-range 1.8 Нет Нет 9.0
:out-of-range 1.8 Нет Нет 9.0
:required Нет Нет Нет 9.0
:optional Нет Нет Нет 9.0
:read-only Нет Нет Нет Нет
:read-write Нет Нет Нет Нет

Вот так, весь кайф обламали ;-(

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

Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами

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

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

В этой статье мы познакомимся с двумя типами псевдоклассов:

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

Разметка и DOM-дерево

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

А теперь давайте преобразуем этот код в нечто, понятное визуально и интуитивно — в DOM-дерево.

Давайте рассмотрим подробнее элемент body . В нём расположено 3 дочерних элемента: main и два элемента .

На схеме представлено отношение между body и дочерними элементами.

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

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

Теперь давайте посмотрим на div-контейнер с классом main :

Псевдокласс only-of-type (единственный из выбранного типа)

Для всех псевдоклассов действует один и тот же формат:

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

В приведённом выше фрагменте кода выбираемый элемент — тег , а его селектор — one-of-type .

Данный пример можно изучить в работе на codepen.io. Уберите символы комментариев, чтобы посмотреть, как работает тот или иной селектор, а лучше продолжите чтение статьи, чтобы не запутаться.

Начнём с того, что выберем всё, что есть в DOM, а затем отфильтруем.

Обратите внимание, как был произведён выбор: в каждой секции (от 1 до 5) у элементов есть общий родительский элемент. Пример: родительский элемент для первой секции — body , для второй секции — контейнер с классом main , и т. д. Каждая секция соответствует уровню вложенности кода.

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

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

Only-of-type проходит через все секции, выбирая только те элементы , которые являются единственными для своей секции.

Псевдокласс first-of-type (первый из выбранного типа)

Давайте продолжим с того, на чём остановились — с выбираемого элемента (речь идёт об -теге).

Селектор first-of-type выбирает каждый первый элемент в секции.

Код, который выполняет условия приведённой выше схемы:

Вы можете посмотреть как работает этот код в браузе на codepen.io.

Псевдокласс last-of-type (последний из выбранного типа)

Last-of-type — полная противоположность псевдокласса first-of-type . Этот селектор выбирает последние элементы во всех секциях.

Псевдокласс nth-of-type (n-й из выбранного типа)

Теперь переходим к наиболее интересной части статьи. Рассмотрим простой CSS с элементами математики из школьной программы.

Давайте определим следующий стиль, чтобы посмотреть на селектор в действии:

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

Итак, давайте вернёмся к селектору. a:nth-of-type(1) может читаться точно так же, как и a:first-of-type . В данном случае эти селекторы работают одинаково: каждый из них выбирает только те элементы , которые являются первыми в своих секциях.

А теперь давайте попробуем кое-что другое:

А если мы пойдём немного глубже и напишем следующее условие:

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

Для полного понимания картины приведу ещё один пример:

В этом случае будет выбран третий (не перепутайте с a:last-of-type ) элемент во второй секции, так как эта секция — единственная, в которой есть три элемента .

Достаточно просто, не так ли? Но вставлять в скобки вы можете не только числа, но и формулы. Например, (a*n)+b (то же самое, что и an + b ), где a и b константы, а n значение, которое больше или равно нулю. Не переживайте, если вам что-то непонятно, сейчас я всё объясню.

Для начала применим следующий стиль:

Формула, переданная в селектор выглядит следующим образом: (1 * n) + 0 [=n] , где а = 1 , b = 0 , n — переменная. Теперь давайте разберёмся, что идёт дальше. Значение n последовательно вставляется в формулу, начиная с 0, после этого селектор делает выбор. Поэтому a:nth-of-type можно представить следующим образом:

В соответствии с данными результатами и будет выбран элемент .

Давайте приведём ещё один пример:

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

Помимо чисел и формул, генерирующих числа, вы можете также выбирать чётные или нечётные номера элементов. Even выбирает все чётные номера элемента в соответствующих секциях. Предположим, что у нас есть секция с 4-мя элементами . Из этой секции селектор выберет второй и четвёртый элементы . Аналогичным образом селектор работает с нечётными числами, только следует заменить even на odd a:nth-of-type(odd)

Псевдокласс nth-last-of-type (n-й с конца из выбранного типа)

Этот селектор работает точно так же, как и предыдущий, но с небольшим отличием:

На этом часть статьи о селекторах *-of-type подходит к концу. Надеюсь, что вам понравилось. Мы проделали большой путь от only-of-type до nth-last-of-type , углубившись в first-of-type , last-of-type и nth-of-type . Если где-то в середине вы что-то не до конца поняли, то предлагаю вам поэкспериментировать в codepen и перечитать эту часть.

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

Псевдокласс only-child (единственный из выбранного типа дочернего элемента)

Примените следующий стиль к HTML-коду, который дан в самом начале .

Псевдокласс first-child (первый дочерний элемент)

Примените следующий стиль:

Псевдокласс last-child (последний дочерний элемент)

Думаю, что после всего материала, который мы изучили, вы примерно понимаете, как работает этот селектор. Если нет — объясняю: last-child выбирает последний элемент в каждой секции. Правило прежнее: -элемент должен быть именно первым в списке всех дочерних элементов, иначе он не будет выбран.

Обратите внимание на схему после кода.

Псевдокласс nth-child (n-й дочерний элемент)

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

Обратите внимание на следующий пример:

Всё работает так же, как и с селектором nth-of-type .

Чтобы начать использовать nth-child , нужно повторить все те действия, которые мы произвели с селектором nth-of-type — поместить в скобки любое число. В примере выше селектор сработает точно так же, как и first-child — выберет все первые элементы в секциях.

Итак, давайте перейдём к новому примеру:

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

Если селектор получает числа, выходящие за пределы секторов (как -1, 5, 6), он просто их игнорирует.

На схеме ниже показано действие селектора a:nth-child(2n-1) :

На сайте CSS Tricks вы сможете найти очень полезную и исчерпывающую статью о селекторе :nth-child .

А пока что давайте перейдём к последнему селектору в нашем руководстве.

Псевдокласс nth-last-child (n-й дочерний элемент с конца)

Этот селектор работает точно так же, как и :nth-child , за исключением одной тонкости: он видит и читает дерево DOM в обратном направлении — справа налево.

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

Обратите внимание на то, как расположены и выбраны дочерние элементы на схеме:

Как видите, всё довольно просто — выбор элемента происходит с конца.

Заключение

На этом наше знакомство с псевдоклассами окончено. Но вы всегда можете найти полезный материал по CSS у нас на сайте. Желаем вам удачи в освоении CSS!

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

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

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

color:green;

Этот код сделает цвет текста во всех четных строках таблицы на зеленый.

Кроме этого в процессе взаимодействия пользователя со страницей возникают динамические состояния. К примеру когда посетитель наводит указатель мыши на элемент Ссылка возникает его динамическое состояние a:hover. А когда пользователь нажимает на элемент то возникает динамическое состояние a:visited.

Псевдоклассы CSS бывают следующих видов:

  1. Динамические.
  2. Псевдоклассы пользовательского интерфейса.
  3. Структурные псевдоклассы.
  4. Целевой псевдокласс :target.
  5. Языковой псевдокласс :lang().
  6. Псевдокласс отрицания :not().
  7. Комбинация псевдоклассов.
Динамические псевдоклассы

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

:link — Стиль применяется к непосещенным ссылка;

:visited — Стиль применяется к ссылке которую вы уже посетили на странице;

:focus — Применение стиля к ссылкам, или элементам, которые были активированы курсором или же с помощью клавиатуры (клавишой TAB). Чаще всего используется для элементов форм;

:hover — используется для применения стилей к элементами на которые наведен курсор мыши;

:active — выбирается элемент страницы на который было произведено нажатие мыши. Применяется как к ссылкам так и другим элементам веб страницы.

Псевдоклассы CSS для пользовательского интерфейса

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

:disabled — стили для заблокированных к изменению элементов форм;

:enabled — противоположный предыдущему, применяет стили к не заблокированным элементам формы;

:checked — стилизация таких элементов как: , , а также элементов , находящихся внутри элемента ;

:indeterminate — применяется к элементам формы таким как радио и чекбокс. Такие элементы формы могут находиться в неопределенном состоянии. Именно к таким и применяются стили.

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

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

:root — выбор элемента, который является корневым в документе;

:nth-child() — элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
li:nth-child(even) — каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
li:nth-child(odd) — каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
li:nth-child(3) — только элемент с индексом 3.
li:nth-child(an+b) — например, li:nth-child(3n+1) выберет первый (3*0 +1 = 1), четвёртый (3*1 +1 = 4), седьмой (3*2 +1 = 7) элементы и т.д., причём значение b может быть равно нулю;

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

:nth-of-type() — элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;

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

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

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

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

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

:only-child — дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1) , но с меньшей специфичностью;

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

:empty — элемент, который не содержит ни одного дочернего элемента.

Целевой псевдокласс

Некоторые ссылки указывают на местоположение внутри ресурса. Этот тип ссылок заканчивается символом «решетка» # , за которым следует идентификатор якоря (так называемый идентификатор фрагмента), например https://web-legko.ru/css3/#content . Элемент с идентификатором фрагмента называется целевым элементом. С помощью данного псевдокласса можно стилизовать элемент, к которому перешли по ссылке на странице (навигация по странице), а также элементы, которые расположены в одном блоке и при нажатии на кнопку/ссылку сменяются/перемещаются (например, css-слайдер).

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

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

Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang=»fr» . В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) .

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

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

  • элемента, например, body :not(strong)
  • класса и идентификатора, например, p:not(.text)
  • псевдокласса, например, ul:not(:first-child)
  • атрибута, например, input:not([type=»checkbox»])
Комбинации псевдоклассов

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

tr:nth-last-child(even):hover — добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);

h2:not(:first-of-type):not(:last-of-type) — добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.

CSS3 Псевдоклассы: in-range, out-of-range, indeterminate.

Сегодня мы продолжим узнавать про новые псевдоклассы и разберем такие из них как in-range, out-of-range и indeterminate.

Первый из них — in-range.

Нужен он для того, чтобы стилизовать элементы input с типом range. Работает тогда, когда значения, введеные пользователем, находятся в возможном для него диапазоне.

input:in-range <
background: #0f0;
>

Дальше идет out-of-range. Он стилизует элементы input, у которых значения НЕ находятся в указанном диапазоне.

input:out-of-range <
background: red;
>

Еще один полезный псевдокласс — indeterminate.

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

:indeterminate <
background: blue;
>

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)

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

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

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

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

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

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

    :first-letter

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

    Рассмотрим применение first-letter на примере создание выступающего инициала:

    И результат примера:

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

    :first-line

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

    :after и :before

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

    Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.

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

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

    При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:

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

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

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

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

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

    Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a <. >и a:link <. >в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.

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

    Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

    Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

    И последний псевдокласс :hоvеr применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

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

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

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

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

    В этом примере с помощью правила CSS «li:first-child» мы говорим браузеру, что стиль необходимо применить к элементу li, который идет первым в своем родительском элементе. А с помощью селектора «li:last-child» элемент должен быть последним. Таким образом, с помощью свойств css для настроек отображения шрифтов, мы указали, что первый элемент списка должен быть выделен жирным шрифтом, а у последнего элемента установили шрифт красного цвета.

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

    В примере псевдокласс : only-of-type применяется к элементу , в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег

    ) встречаются только один раз.

    Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:

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

    • odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению ;
    • even — означает все четные элементы;
    • число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
    • выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2.

    Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс :nth-child:

    В коде примера запись tr:nth-child (2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье как вставить таблицу на html-странице). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2. В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.

    Псевдоклассы :not и *

    Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс :not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

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

    В результате этого css правила, текст всех заголовков h1 окрасятся в красный цвет, кроме того у которого атрибут id будет равен main.

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

    Например, чтобы установить размер текста для всех элементов документа можно использовать следующее правило css:

    На этом все, до новых встреч на страницах блога!

    Псевдокласс :in-range в CSS

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

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

    И псевдоклассы, и псевдоэлементы были с самого начала 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. Это тоже может быть интересно:

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

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

    Псевдоэлемент ::placeholder

    Псевдоэлемент ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги атрибутом type=»text» или «email» , но также их часто можно встретить в полях типа «url» или «search» :

    Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:

    Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com

    Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.

    В примере поле с type=»search» имеет другой цвет текста в placeholder . Чтобы изменить цвет для определенного типа поля, необходимо записать стили этого псевдоэлемента так:

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

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

    Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:

    • color
    • font и все связанные свойства ( font-size , font-family и т.д.)
    • text-decoration
    • text-indent
    • text-overflow
    • text-transform
    • line-height
    • word-spacing
    • letter-spacing
    • background и все связанные свойства ( background-color , background-image и т.д.)
    • opacity
    • vertical-align

    В основном, это свойства, так или иначе связанные с форматированием текста.

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

    Кроме псевдоэлемента ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown , посмотреть поддержку которого можно также на сайте caniuse.com.

    Отличие :placeholder-shown от ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.

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

    Изучаем псевдоклассы в CSS

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

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

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

    Перед именем псевдокласса, ставится двоеточие.

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

    В CSS-коде это выглядит следующим образом:

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

    В CSS-коде это выглядит следующим образом:

    Какие псевдоклассы существуют в CSS?

    Рассмотрим, какие псевдоклассы существуют в языке CSS.

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

    • :link — задаёт CSS-свойства ссылкам, но не якорям
    • :visited — задаёт CSS-свойства уже посещённым ссылкам
    • :hover — задаёт CSS-свойства при наведении курсора мыши на элемент
    • :active — задаёт CSS-свойства при нажатии левой кнопкой мыши по элементу, при условии что кнопка мыши еще не отпущена
    • :focus — задаёт CSS-свойства при получении элементом фокуса, например щелкнули по текстовому полю (для того чтобы ввести данные), фокус могут получить (ссылки, кнопки, элементы формы), помимо щелчка мыши фокус могут получать элементы при нажатии на кнопку табуляции (Tab) на клавиатуре

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

    • :checked — задаёт CSS-свойства при выделении элементов формы, таких как флажки ( radio ) или переключаетели ( checkbox )
    • :disabled — задаёт CSS-свойства отключённым (заблокированным) элементам формы
    • :enabled — задаёт CSS-свойства включённым (обычным) элементам формы
    • :optional — задаёт CSS-свойства не обязательным для заполнения элементам формы input , у которых отсутствует атрибут required
    • :required — задаёт CSS-свойства обязательным для заполнения элементам формы input , у которых имеется атрибут required

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

    • :first-child — задаёт CSS-свойства первому потомку родителя (родитель потомок :first-child < >)
    • :last-child — задаёт CSS-свойства последнему потомку родителя
    • :first-of-type — задаёт CSS-свойства первому потомку родителя по типу
    • :last-of-type — задаёт CSS-свойства последнему потомку родителя по типу
    • :nth-child — задаёт CSS-свойства потомкам родителя на основе их нумерации в структуре HTML-документа или внутри родителя ( :nth-child(odd|even|число|выражение) )
    • :nth-last-child — то же что и :nth-child , только нумерация идёт с конца
    • :nth-of-type — задаёт CSS-свойства потомкам элемента по типу, на основе их нумерации в структуре HTML-документа или внутри родителя ( :nth-of-type(odd|even|число|выражение) )
    • :nth-last-of-type — то же что и :nth-of-type , только нумерация идёт с конца
    • :only-child — задаёт CSS-свойства элементу потомку, при условии что он единственный у родителя
    • :only-of-type — задаёт CSS-свойства элементу потомку по типу, при условии что он единственный у родителя

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

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

    • :empty — задаёт CSS-свойства, пустым элементам страницы, внутри которых ничего нету, даже пробела, например или
    • :not(селектор) — задаёт CSS-свойства всем элементам, кроме селекторов указанных в скобках
    • :target — задаёт CSS-свойства для элементов, к которым переходят по ссылкам-якорям

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

    На этом пока всё, хотите узнать Разницу между псевдоклассами nth-child и nth-of-type, тогда добро пожаловать в следующий урок ��

    Часть 2. Селекторы потомков. Псевдоклассы и псевдоэлементы CSS

    В предыдущем разделе этой главы были рассмотрены четыре типа селекторов – селекторы тегов, классов, ID и групп. В этой части мы перейдем к селекторам потомков (которые также называются контекстными селекторами), а также познакомим вас с псевдоклассами и псевдоэлементами CSS.

    Селекторы потомков

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

    А что делать в том случае, когда нам нужны подчеркнутые ссылки, но только тогда, когда они находятся в теге

    ? Мы могли бы создать отдельный класс и присваивать его нужным ссылкам, но это не совсем верный способ, который требует как дополнительных затрат по времени, так и места в HTML-коде. Гораздо легче использовать селекторы потомков (контекстные селекторы) и записать:

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

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

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

    Иерархия HTML-тегов: родственные связи

    Глядя на схему, легко понять родственные связи тегов – можно сказать, здесь всё обстоит так же, как у людей �� :

    • предком называется тот тег, который включает в себя другие теги. В приведенной схеме html – это предок для head и body , а head , в свою очередь, является предком для title и script . Тег body – предок для h1 , h2 и p ;
    • потомком называется тег, который расположен в одном или нескольких тегах. Например, теги head и body являются потомками тега html , title и script – потомки и для head , и для html , теги h1 , h2 и p – потомки и для body , и для html , а span – потомок для p , body и html ;
    • родительским называется тот элемент, который находится на один уровень выше относительно другого. В схеме родителем является html по отношению к head и body . Тег head – родитель тегов title и script . Тег body – родитель для h1 , h2 и p . А тег p является родителем для span ;
    • дочерним, соответственно, называется элемент, который находится под родительским элементом. Теги h1 , h2 , p – дочерние для body . Но при этом тег span является дочерним только для p ;
    • сестринскими, или соседними называются элементы, у которых есть общий родитель. Вы наверняка уже догадались, что теги head и body – сестринские. Также соседними между собой являются теги h1 , h2 , p .

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

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

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

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

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

    Популярные псевдоклассы CSS

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

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

    Как записываются псевдоклассы CSS? Необходимо добавить стиль с названием необходимого элемента + имя псевдокласса. Пример:

    В записанном стиле сказано, что обычные, непосещённые ссылки должны быть красного цвета a:link , ссылка при наведении должна менять цвет на другой a:hover , а посещённая ссылка должна иметь третий цвет a: visited .

    Популярные псевдоэлементы CSS

    Если псевдоклассы записываются с одним двоеточием, то псевдоэлементы – с двумя. Это было внедрено в CSS3 для того, чтобы различать псевдоклассы и псевдоэлементы между собой. Однако раньше этой разницы не существовало и с псевдоэлементами использовалось одно двоеточие. Сейчас браузеры поддерживают оба варианта написания (но не для всех случаев). Рассмотрим некоторые псевдоэлементы:

    • ::after – используется вместе со свойством content и позволяет вывести необходимые данные после содержимого элемента;
    • ::before – выполняет похожую функцию, что и предыдущий, только выводит данные перед содержимым элемента;
    • ::selection – этот псевдоэлемент распознается браузерами только при использовании двух двоеточий и позволяет установить цвет и фон для текста, который выделен пользователем;
    • ::first-letter – используется для изменения стиля первого символа в тексте элемента;
    • ::first-line – используется для изменения стиля первой строки текста элемента.

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

    Мы написали стиль для длинных цитат, который добавляет кавычки «ёлочки» в начале и в конце содержимого тега

    , а также изменяет цвет и фон выделенного пользователем текста цитаты.

    Выводы

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

    Благодаря селекторам потомков вам доступны гибкие и компактные настройки CSS-стилей.

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

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

    Следующая часть главы – о дочерних селекторах.

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