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

Reading time ~5 minutes

В CSS существует два типа псевдо-сущностей: псевдо-классы (

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

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

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

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

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

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

Так в чем же разница между псевдо-классом (

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

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

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

Прим. переводчика: заметили одну особенность? Обе псевдо-сущности появляются на HTML-странице только при одном условии - выполнении какого-то (не важно, какого) события. Просто одна сущность появляется на странице в виде класса (

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

Возьмем в качестве примера псевдо-элемент (

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

Легко:

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

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

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

HTML-разметка:

<h1>
  <first-letter>H</first-letter>owdy, y'all
</h1>

CSS-правило:

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

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

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

Например, представим себе, что браузер добавляет класс

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

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

Простая замена точки на двоеточие (получается

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

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

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

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

Спецификация CSS3 добавляет еще несколько псевдо-классов (

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

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

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

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024