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

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

Псевдоклассами называют селекторы, которые связаны с выполнением некоторых действий на Web-странице.

В спецификации CSS2 определены следующие псевдоклассы::first-child,:lang(язык),:link,:visited,:hover,:active и:focus.

Как и для селектора id, перед селектором псевдокласса может быть задан либо селектор типа, либо универсальный селектор, либо имя элемента не указывается.

Псевдокласс:first-child задает действие селектора только если заданный элемент является первым дочерним элементом другого элемента.

Пример 4.3.24. Задание псевдокласса:first-child:

p:first-child {color:red}

В следующем фрагменте Web-страницы элемент div является родительским для элементов p со значениями атрибута id, равными "p1" и "p2", поскольку оба элемента заключены в контейнер <div>…</div>:

<div>

<p id="p1">Абзац 1</p>

<p id="p2">Абзац 2</p>

</div>

Первым дочерним элементом элемента div является элемент p со значением атрибута id, равными "p1". Этот абзац будет выведен красным цветом, а второй абзац будет выведен цветом по умолчанию (черным цветом):

Псевдокласс:lang(язык) задает действие селектора только для заданного в скобках двухсимвольного кода языка. Например, для английского языка этот код имеет значение en, для русского – ru и для украинского – uk. Этот псевдокласс не работает в Internet Explorer.

Пример 4.3.25. Задание псевдокласса:lang(язык):

:lang(en) {font-style:italic}

В следующем фрагменте Web-страницы элемент div является родительским для элементов p со значениями атрибута id, равными "p1" и "p2", поскольку оба элемента заключены в контейнер <div>…</div>:

<h2>Сеть <span lang="en">Internet</span></h2>

<p>Протокол <span lang="en">TELNET</span> определяет

доступ к удаленному терминалу сети</p>

Слово Internet в заголовке второго уровня и слово TELNET в абзаце будут выведены курсивом:

Псевдоклассы:link,:visited,:hover,:active и:focus будут описаны при рассмотрении гиперссылок.

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

В спецификации CSS2 определены следующие псевдоэлементы::first-line,:first-letter,:before и:after.

Как и для селектора id, перед селектором псевдоэлемента может быть задан либо селектор типа, либо универсальный селектор, либо имя элемента не указывается.

Псевдоэлемент:first-line используется для применения стилей к первой форматируемой строке абзаца.

Пример 4.3.26. Задание псевдоэлемента:first-line:

p#p1:first-line {color: red; font-weight:bold}

В следующем фрагменте Web-страницы

<p id="p1">Строка 1<br/>

Строка 2</p>

первая строка абзаца с содержимым "Строка 1" будет выведена полужирным шрифтом красным цветом:

Псевдоэлемент:first-letter используется для применения стилей к первой букве абзаца.

Пример 4.3.27. Задание псевдоэлемента:first-letter:

p.navy:first-letter {color:navy;font-size:28pt}

В следующем фрагменте Web-страницы

<p class="navy">Абзац с увеличенной первой буквой</p>

первая буква абзаца "А" будет выведена темно-синим цветом и размером 20 пунктов:

Псевдоэлементы:before и:after будут описаны при рассмотрении генерируемого содержимого.