В 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;
}
Такое впечатление, что внутри HTML-разметки и CSS-таблицы произошли следующие изменения:
HTML-разметка:
<h1>
<first-letter>H</first-letter>owdy, y'all
</h1>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”
На этом все.