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

В 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

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

1

pseudo-class

1

pseudo-element

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

1	pseudo-class

), а вторая в виде элемента (

1	pseudo-element

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

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

1

pseudo-element

1

::first-letter

1

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-документа.

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

1

first-child

1

li

1

ul

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

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

1

li:first-child

Вы могли уже догадаться относительно использования в псевдо-элементах двойного двоеточия. Такой синтаксис появился уже позже спецификации 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”

На этом все.