Pseudo-class и pseudo-element - что это?

Reading time ~3 minutes

В CSS существует два типа псевдо-сущностей: псевдо-классы (pseudo-class) и псевдо-элементы (pseudo-element). В спецификации CSS2.1 имеются следующие псевдо-классы и псевдо-элементы (pseudo-element):

Псевдо-классы (pseudo-class):

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

Псевдо-элементы (pseudo-element):

Псевдо-элементы, существующие в спецификации CSS2.1:

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

Так в чем же разница между псевдо-классом (pseudo-class) и псевдо-элементом (pseudo-element)? Все различие заключается в способе, которым эти две псевдо-сущности осуществляют воздействие на HTML-документ.

Псевдо-классы (pseudo-class) ведут себя так, как если бы они добавлялись в виде обычных классов элементам HTML-страницы при выполнении определенных событий. Псевдо-элементы (pseudo-element) ведут себя так, как если бы они были обычными элементами HTML-страницы, но добавляемыми на нее при выполнении определенных событий.

Прим. переводчика: заметили одну особенность? Обе псевдо-сущности появляются на HTML-странице только при одном условии - выполнении какого-то (не важно, какого) события. Просто одна сущность появляется на странице в виде класса (pseudo-class), а вторая в виде элемента (pseudo-element). Каким образом появляются? Только одним способом - браузер сам создает (генерирует) псевдо-сущность при выполнении указанного события. Поэтому псевдо-сущности иногда называют генерируемым содержимым. Название “псевдо” в точности говорит само за себя - “как-будто”. То есть - “как-будто класс”, “как-будто элемент”. Название дано не случайно - в исходном коде HTML-страницы не существуют таких классов или элементов; но они появляются (генерируются) там с помощью браузера при определенном событии.

Возьмем в качестве примера псевдо-элемент (pseudo-element) ::first-letter. Предположим, необходимо сделать каждую первую букву заголовка h1 вдвое большего размера, чем остальной текст в этом заголовке.

Легко:

h1::first-letter{
 font-size: 250%;
 color: #778899;
}

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

Такое впечатление, что внутри HTML-разметки и CSS-таблицы произошли следующие изменения:

HTML-разметка:

Howdy, y'all

CSS-правило:

h1 first-letter{
 font-size: 250%;
}

Выглядит это так, словно в действительно все так (как создается впечатление) и происходит внутри браузера, не правда ли? Кто знает? Все, что вы знаете, что это работает так, как будто на самом деле так и выглядит. Имя всему этому “псевдо-элемент”.

Аналогично, псевдо-класс работает так, если обычный класс добавляется к элементам внутри HTML-документа.

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

li.first-child{
 border-left: none;
}

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

Вы могли уже догадаться относительно использования в псевдо-элементах двойного двоеточия. Такой синтаксис появился уже позже спецификации CSS2.1 (в спецификации CSS3).

Ни у одного браузера нет строго условия использования двойного двоеточия в псевдо-элементах: одинарное двоеточие прекрасно понимается всеми браузерами.

CSS3 псевдо-классы (pseudo-class):

Спецификация CSS3 добавляет еще несколько псевдо-классов (pseudo-class), большинство из которых не имеет всеобщей поддержки в браузерах (на момент написания статьи):

  • :target
  • :root
  • :nth-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :only-child
  • :last-child
  • :empty
  • :not()
  • :enabled
  • :disabled
  • :checked

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке