Обратите внимание, что

  1. данный документ является переводом документа «Selectors Level 3» и на данный момент находится на стадии перевода;
  2. данный документ может содержать неточности, опечатки и ошибки перевода;
  3. официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте W3C.

Селекторы 3 Уровня


Содержимое


* * *

6. Простые селекторы


* * *

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


* * *

6.6.1. Динамические псевдоклассы


* * *

6.6.1.2. Псевдоклассы действий пользователя :hover,:active и :focus

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

Так же может быть язык документа или реализация определённых ограничений на то, какие элементы могут стать :active или получить :focus.

Эти псевдоклассы не являются взаимоисключающими. Элемент может сочетать несколько псевдоклассов, в одно и то же время.

Для селектора не определён случай, когда родительский элемент также как и дочерний имеет ‘:active’ или ‘:hover’.

Примечание: Если псевдокласс ‘:hover’ применяется к элементу, потому что его дочерний элемент был обозначен с помощью указательного устройства, то можно ‘:hover’ применять к элементу который не был указан.

Примеры:

a:link    /* не посещённая ссылка */
a:visited /* посещённая ссылка */
a:hover   /* пользователь указывает на элемент */
a:active  /* активировання ссылка */

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

a:focus
a:focus:hover

Последний селектор соответствует элементам a к которым применяется псевдокласс :focus и псевдокласс :hover.

Примечание: Элемент может быть и ‘:visited’ и ‘:active’ (или ‘:link’ и ‘:active’).

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


* * *

7.1. Псевдоэлемент ::first-line

CSS пример:

p::first-line { text-transform: uppercase }

Вышеуказанное правило приводит к «переводу букв первой строки каждого элемента р в верхний регистр».

Селектор p::first-line не соответствует ни одному существующему элементу документа. Он соответствуют псевдоэлементу, который агенты пользователей будут вставлять в начале каждого элемента p.

Обратите внимание, что длина первой строки зависит от ряда факторов, в том числе от ширины страницы, размера шрифта и так далее. Таким образом, обычный абзац HTML документа, такой как:

<P>Это довольно длинный HTML
абзац, который будет разбит на несколько
строк. Первая строка будет заключена
между псевдо тегов. Остальные строки
будут обрабатываться как обычные строки
абзаца.</P>

строки, которые были разделены следующим образом:

ЭТО ДОВОЛЬНО ДЛИННЫЙ HTML
абзац, который будет разбит на несколько
строк. Первая строка будет заключена
между псевдо тегов. Остальные строки
будут обрабатываться как обычные строки
абзаца.

Этот абзац будет «переписан» агентами пользователей так, чтобы заключить первую строку между псевдотегов ::first-line. Такая расстановка псевдотегов помогает показать как наследуются параметры.

<P><P::first-line>Это довольно длинный HTML</P::first-line>
абзац, который будет разбит на несколько
строк. Первая строка будет заключена
между псевдо тегов. Остальные строки
будут обрабатываться как обычные строки
абзаца.</P>

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

<P><SPAN class="test">Это довольно длинный html
абзац, который будет разбит на несколько
строк.</SPAN> Первая строка будет заключена
между псевдо тегов. Остальные строки
будут обрабатываться как обычные строки
абзаца.</P>

агент пользователя может имитировать начальные и конечные теги для span при вставке последовательности псевдотегов для ::first-line.

<P><P:first-line><SPAN class="test">Это довольно длинный html
</SPAN></P:first-line><SPAN class="test">
абзац, который будет разбит на несколько
строк.</SPAN> Первая строка будет заключена
между псевдо тегов. Остальные строки
будут обрабатываться как обычные строки
абзаца.</P>

7.1.1. Определение первой отформатированной строки в CSS

В CSS псевдоэлемент ::first-line может создавать стилевой эффект только при подключении к блочным элементам, таким как block, inline-block, table-caption или table-cell.

Первая отформатированная строка элемента может возникнуть внутри дочернего элемента блока в том же потоке (то есть на уровне блока-потомка, который не является обтекаемым или позиционируемым). Например, первая строка DIV располагается в <DIV><P>Эта строка...</P></DIV> является первой строкой P (при условии, что и P и DIV являются элементами блок-уровня).

В первой строке элемента со значением table-cell или inline-block первая строка не может быть отформатирована. Таким образом, в <DIV><P STYLE="display: inline-block">Привет<BR>Пока</P> и так далее</DIV> первая отформатированная строка DIV это не строка «Привет».

Примечание: Обратите внимание, что в первой строке p в этом фрагменте: <p><br>Первый... вообще не содержится букв (при условии, что по умолчанию стиль используется в HTML 4 для br). При этом слово «Первый» находиться не на первой форматируемой строке.

Агент пользователя должен действовать так, как будто псевдотеги ::first-line были вложены только внутрь самого первого блочного элемента охватывающего остальные элементы с текстом. (В CSS1 и CSS2 не было информации по этому поводу, поэтому разработчики не должны не полагаться на такое поведение.) Например, последовательность псевдотегов для

<DIV>
  <P>Первый абзац</P>
  <P>Второй абзац</P>
</DIV>

получается

<DIV>
  <P><DIV::first-line><P::first-line>Первый абзац</P::first-line></DIV::first-line></P>
  <P><P::first-line>Второй абзац</P::first-line></P>
</DIV>

Псевдоэлемент ::first-line похож на элементы строчного уровня, но тем не менее имеет ряд отличий. К псевдоэлементу ::first-line могут применяться следующие свойства CSS: свойства font, свойства color, свойства background, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘text-transform’ и ‘line-height’. Агенты пользователей можнут также применять и другие свойства.

Во время наследования свойств CSS, часть дочернего элемента являющаяся первой строкой, наследует только свойства, применяемые к дочернему псевдоэлементу ::first-line от родительского псевдоэлемента ::first-line. Все остальные свойства наследуются псевдоэлементом первой строкой от не псевдоэлемента родителя. (Часть дочернего элемента, которая не является первой строкой, всегда наследует свойства от родительских элементов этого дочернего элемента.)

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

Псевдоэлемент ::first-letter изменяет первую букву элемента, если ей не предшествует любое другое содержимое (например, изображения или встроенные таблицы) находящееся в первой строке. Псевдоэлемент ::first-letter может быть использован для создания «начальных заглавных» символов и «буквиц» являющихся распространёнными типографскими эффектами.

Символы пунктуации (то есть символы, определённые в Unicode в «открывающих» (Ps), «закрывающих» (Pe), «начальных» (Pi), «конечных» (Pf) и «других» (Po) классах пунктуации), которые предшествует или следуют за первой буквой, должны быть включены в форматирование. [UNICODE]

Пример работы CSS свойства :first-letter

::first-letter также применяется, если первая буква в действительности является цифрой, например цифра «6» в предложении «67 миллионов долларов это много денег».

Примечание: В некоторых случаях псевдоэлемент ::first-letter должен включать в себя больше, чем просто первый символ строки не являющийся знаком препинания. Например, вспомогательные символы, которые должны находиться рядом со своим базовым символом. Кроме того, некоторые языки могут иметь специальные правила обращения с определёнными комбинациями букв. Агент пользователя определяет должен ли ::first-letter включать графему кластера по умолчанию, как это определено UAX29 и может ли он включать в себя больше чем положено в случае необходимости. В голландском, например, если в начале элемента присутствует сочетание букв «ij», то обе буквы должны быть рассмотрены в рамках псевдоэлемента ::first-letter. [UAX29]

Если символы, которые образуют ::first-letter, находятся не в одном элементе, например, как «‘Т» в <p>‘<em>Т..., то агент пользователя может создать псевдоэлемент ::first-letter с одним из элементов, с обеими элементами или просто не создавать псевдоэлемент.

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

Пример:

В следующем примере с использованием CSS и HTML показано, как перекрывающие друг друга псевдоэлементы могут взаимодействовать. Первая буква каждого элемента P окрасится в зелёный цвет с размером шрифта ‘24pt’. Остальные буквы первой форматируемой строки будут окрашены в ‘синий’ цвет, а оставшаяся часть текста будет окрашена в ‘красный’.

p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }

<P>Некоторый текст, разделённый на две строки</P>

Допустим, что разрыв строки находится перед словом «разделённый», то тогда последовательность фиктивных тегов для этого фрагмента может быть следующей:

<P>
<P::first-line>
<P::first-letter> 
Н 
</P::first-letter>екоторый текст,
</P::first-line> 
разделённый на две строки
</P>

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

Первая буква должна быть выведена на первую отформатированную строку. Например, в данном фрагменте: <p><br>Первый... первая строка не содержит никаких букв и псевдоэлементу ::first-letter ни чего не соответствует (при условии, что по умолчанию используется стиль для br в HTML 4). В частности, ему не соответствует буква «П» из слова «Первый».

7.2.1. Применение в CSS

В CSS псевдоэлемент ::first-letter применяется к таким блок-контейнерам как block, list-item, table-cell, table-caption и inline-block элементам. Примечание: Будущая версия этой спецификации может позволить этому псевдоэлементу распространяться на ещё большее число типов свойства display.

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

Пример:

Фиктивная последовательность тегов для данного фрагмента HTML:

<div>
<p>Первый текст.

с фиктивными тегами

<div>
<p><div::first-letter><p::first-letter>П</...></...>ервый текст.

В CSS первая буква, находящаяся в ячейке таблицы или во встраиваемом блоке не может быть первой буквой родительского элемента. Таким образом, в <DIV><P STYLE="display: inline-block">Привет<BR>Пока</P>и так далее</DIV> первая буква DIV это не буква «П». В самом деле, у DIV нет первой буквы.

Если элемент является элементом списка (‘display: list-item’), то ::first-letter применяется к первому символу основного контейнера после маркера. Агенты пользователей могут игнорировать ::first-letter, используемый для элементов списка с ‘list-style-position: inside’. Если элемент имеет ::before или ::after, то действие ::first-letter распространяется на первый символ элемента, включая подобное содержимое.

Пример:

При p::before {content: "Примечание:"}, селектору p::first-letter соответствует буква «П» в «Примечание:».

В CSS псевдоэлемент ::first-line аналогичен элементу строчного уровня, если его свойство ‘float’ имеет значение ‘none’; в противном случае, они похожи на плавающие элементы. Свойства применяемые к псевдоэлементу ::first-letter: font свойства, ‘text-decoration’, ‘text-transform’, ‘letter-spacing’, ‘word-spacing’ (при необходимости), ‘line-height’, 'float’, ‘vertical-align’ (только если ‘float’ имеет значение ‘none’), margin свойства, padding свойства, border свойства, color свойства, background свойства. Агенты пользователей также могут применять и другие свойства. Чтобы позволить агентам пользователей типографским способом выводить буквицы и начальные заглавные буквы, агенту пользователя позволяется изменять высоту строки, ширину и высоту в соответствии с формой письма отличной от нормальных элементов.

Пример:

В представленном ниже примере с использованием CSS и HTML показано возможное воздействие на первую заглавную букву. Обратите внимание, что ‘line-height’, который наследуется от псевдоэлемента ::first-letter составляет 1.1, но агент пользователя в этом примере вычисляет высоту первой буквы по-другому, так чтобы она не вызывала никаких ненужных пространств между двумя первыми строками. Также обратите внимание, что фиктивный открывающий тег первой буквы находится внутри элемента span, и следовательно, ширина шрифта первой буквы является нормальной, не жирной как span:

p { line-height: 1.1 }
p::first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.

Пример работы CSS псевдоэлемента :first-letter

В следующем примере с помощью CSS будет создана буквица первой сроки размером с две строки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
  <TITLE>Буквица</TITLE>
  <STYLE type="text/css">
   P               { font-size: 12pt; line-height: 1.2 }
   P::first-letter { font-size: 200%; font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Первые</SPAN> несколько слов из статьи
    в журнале «Экономист».</P>
 </BODY>
</HTML>

Данный пример может быть отформатирован следующим образом:

Пример работы CSS свойства :first-letter

Последовательность фиктивных тегов::

<P>
<SPAN>
<P:first-letter>
П
</P:first-letter>ервые
</SPAN> 
несколько слов из статьи в журнале «Экономист».
</P>

Обратите внимание, что теги псевдоэлемента ::first-letter примыкают к содержимому (т.е. к начальному символу), в то время как открывающий тег псевдоэлемента ::first-line вставляется сразу после открывающего тега блочного элемента.

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