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


Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.

Псевдоклассы также используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:

<основной селектор><псевдокласс> { <стиль> }

Псевдоклассы, в свою очередь, сами делятся на группы. Каждой из них мы посвятим отдельный раздел.


Псевдоклассы гиперссылок

Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.

Все псевдоклассы гиперссылок, доступные в стандарте CSS 3:

- :link — непосещенная гиперссылка;

- :visited — посещенная гиперссылка;

- :active — гиперссылка, на которой посетитель в данный момент щелкает мышью;

- :focus — гиперссылка, имеющая фокус ввода (подробнее о фокусе ввода см. в главе 6);

- :hover — гиперссылка, на которую наведен курсор мыши.

Псевдоклассы гиперссылок применяются совместно со стилями, задающими параметры для гиперссылок. Это могут быть стили переопределения тега <A> или комбинированные стили, созданные на основе стиля переопределения тега <A> (листинг 13.5).

Псевдоклассы гиперссылок

В листинге 13.5 псевдоклассы гиперссылок действуют совместно со стилями переопределения тега <A>. В результате приведенные стили будут применены ко всем гиперссылкам на Web-странице.

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

В листинге 13.6 псевдоклассы гиперссылок совмещены с комбинированными стилями, объединяющими стиль переопределения тега <A> и стилевой класс special. Они будут применены только к тем гиперссылкам, к которым был привязан указанный стилевой класс.

Псевдоклассы гиперссылок можно комбинировать, записывая их друг за другом:

A:visited:hover { text-decoration: underline }

Этот стиль будет применен к посещенной гиперссылке, над которой находится курсор мыши.

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


Структурные псевдоклассы

Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.

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

UL:first-child { font-weight: bold }

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

Пример:

TD:last-child { color: green }

Данный стиль будет применен к последнему дочернему элементу каждой строки таблицы — к ее последней ячейке.

Листинг 13.7 иллюстрирует более интересный случай.

Структурные псевдоклассы

Стиль, приведенный в листинге 13.7, будет применен к самому первому абзацу, единственному абзацу в первой большой цитате и первому абзацу во второй большой цитате. Дело в том, что последние два абзаца, к которым будет применен стиль, отсчитываются относительно своих родителей — больших цитат — и в них являются первыми.

А если мы изменим данный стиль вот так:

#cmain > P:first-child { font-weight: bold }

он будет применен только к самому первому абзацу, непосредственно вложенному в контейнер cmain. Ведь мы указали комбинатор >, который предписывает, чтобы элемент, к которому применяется стиль, должен быть непосредственно вложен в своего родителя.

НА ЗАМЕТКУ

Стандарт CSS также описывает псевдоклассы :first-of-type и :last-of-type. Насколько удалось выяснить автору, они работают так же, как и псевдоклассы :first-child и :last-child, которые мы только что изучили. По крайней мере, в текущей реализации поддержки CSS 3...

Псевдокласс :only-of-type привязывает стиль к элементу Web-страницы, который является единственным дочерним элементом, сформированном с помощью данного тега, в своем родителе.

Листинг 13.8 иллюстрирует пример.

Псевдокласс :only-of-type

Стиль из листинга 13.8 будет применен к абзацам, вложенным в первую и вторую большие цитаты, т. к. эти абзацы являются там единственными элементами, сформированными с помощью тега <P>. К абзацам, вложенным в третью большую цитату, стиль применен не будет.

Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, выбрав их по порядковым номерам, под которыми эти элементы определены в своем родителе:

<основной селектор>:nth-child(<a>n+<b>) { <стиль> }

После имени данного псевдокласса в скобках указывают формулу, по которой вычисляются номера элементов, к которым будет применен стиль. Эта формула имеет два параметра, задаваемых Web-дизайнером: a и b. Их значения должны представлять собой неотрицательные целые числа.

Рассмотрим, как выполняется привязка стиля, включающего псевдокласс :nth-child.

Сначала Web-обозреватель считывает CSS-код стиля и, руководствуясь его селектором, находит элементы Web-страницы, к которым, возможно, будет применен данный стиль. Также Web-обозреватель определяет родителя этих элементов.

После этого Web-обозреватель разбивает все найденные элементы на группы. Количество элементов в каждой группе задается параметром a приведенной формулы. После разбиения Web-обозреватель вычисляет количество получившихся групп.

Далее Web-обозреватель последовательно подставляет в формулу вместо n номера получившихся групп, начиная с нуля. В результате каждого прохода вычисления получается номер элемента, к которому применяется стиль.

Для примера создадим таблицу из пяти строк и применим к ней такой стиль:

TR:nth-child(2n+1) { text-align: center }

В стиле мы указали, что группа должна содержать два дочерних элемента. Тогда Web-обозреватель разобьет строки таблицы на две группы, по две строки в каждой.

- Web-обозреватель подставит в формулу n равное 0. После вычисления получится значение 1. Web-обозреватель применит данный стиль к первой строке таблицы.

- Web-обозреватель подставит в формулу n равное 1. После вычисления получится значение 3. Web-обозреватель применит данный стиль к третьей строке таблицы.

- Web-обозреватель подставит в формулу n равное 2. После вычисления получится значение 5. Web-обозреватель применит данный стиль к пятой строке таблицы. Поскольку 2 — общее количество групп, то на этом вычисления закончатся.

В результате данный стиль будет применен к каждой нечетной строке нашей таблицы.

Если мы создадим такой стиль:

TR:nth-child(2n+0) { text-align: center }

то он будет применен ко второй и четвертой (четным) строкам нашей таблицы.

Кстати, мы можем сделать запись чуть короче:

TR:nth-child(2n) { text-align: center }

Ранее мы рассматривали примеры с разбиением дочерних элементов на группы. Но мы можем отменить разбиение, указав нулевое количество элементов в группе. В этом случае Web-обозреватель найдет b-й дочерний элемент и применит стиль к нему.

Так, если мы создадим такой стиль:

TR:nth-child(0n+2) { text-align: center }

то Web-обозреватель применит его ко второй строке таблицы.

Мы можем записать данный стиль и так:

TR:nth-child(2) { text-align: center }

и Web-обозреватель правильно его обработает.

Вместо указания формулы в скобках мы можем поставить там предопределенные значения odd и even. Первое привязывает стиль к нечетным дочерним элементам, второе — к четным:

TR:nth-child(odd) { background-color: grey }

TR:nth-child(even) { background-color: yellow }

Первый стиль будет применен к нечетным строкам таблицы, второй — к четным.

Псевдокласс :nth-last-child аналогичен рассмотренному нами псевдоклассу :nth-child за тем исключением, что отсчет дочерних элементов ведется не с начала, а с конца родительского элемента.

Пример:

TR:nth-last-child(1) { text-align: center }

Данный стиль будет применен к последней строке таблицы.

Пример:

#cmain P:nth-last-child(2) { font-weight: bold }

А этот стиль будет применен к предпоследнему (второму с конца) абзацу в контейнере cmain.

НА ЗАМЕТКУ

Еще стандарт CSS описывает псевдоклассы :nth-of-type и :nth-last-of-type. Насколько удалось выяснить автору, они работают так же, как и псевдоклассы :nth-child и :nth-last-child. Хотя, возможно, в следующих реализациях они будут действовать по-другому.

Последний структурный псевдокласс, который мы изучим, — :empty. Он привязывает стиль к элементам, не имеющим дочерних элементов.

Пример:

P:empty { display: none }

Этот стиль будет привязан к пустым (не имеющим содержимого) абзацам.


Псевдоклассы :not и *


Особый псевдокласс :not позволяет привязать стиль к любому элементу Web-страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

<основной селектор>:not(<селектор выбора>) { <стиль> }

Стиль будет привязан к элементу Web-страницы, удовлетворяющему основному селектору и не удовлетворяющему селектору выбора.

Пример:

DIV:not(#cmain) { background-color: yellow }

Здесь мы указали в качестве основного селектора стиль переопределения тега <DIV>, а в качестве селектора выбора — именованный стиль cmain. В результате данный стиль будет применен ко всем блочным контейнерам, за исключением cmain.

А вот стиль, который будет применен ко всем строкам таблицы, за исключением первой:

TR:not(:nth-child(1)) { background-color: grey }

Псевдокласс * ("звездочка") обозначает любой элемент Web-страницы.

Пример:

#cmain > *:first-child { border-bottom: medium solid black }

Этот стиль будет применен к первому элементу любого типа, который непосредственно вложен в контейнер cmain.


Представление для нашего Web-сайта

Да, специальные селекторы — мудреная штука... Разобраться в них без хорошей практики невозможно. Так давайте попрактикуемся.

Вот список параметров Web-страниц нашего Web-сайта, которые мы зададим с помощью специальных селекторов.

- Текст непосещенных и посещенных гиперссылок — не подчеркнут, цвет #576C8C (темно-синий).

- Текст посещенных гиперссылок, расположенных в полосе навигации, — не подчеркнут, цвет #576C8C. Мы задали для непосещенных и посещенных гиперссылок в полосе навигации одинаковые параметры — так принято.

- Текст посещенных гиперссылок, не расположенных в полосе навигации, — не подчеркнут, цвет #A1AFBA (синий).

- Текст активной гиперссылки — подчеркнут, цвет #576C8C.

- Текст гиперссылки, на которую наведен курсор мыши, — подчеркнут, цвет #576C8C.

- Текст гиперссылки, имеющей фокус ввода, — подчеркнут, цвет #576C8C.

- Шрифт первой буквы первого абзаца в контейнере cmain — 18 пунктов и полужирный.

- Выравнивание текста в ячейках первого и второго столбцов таблицы — списка версий HTML — по центру.Эти ячейки содержат исключительно числа, и центральное выравнивание для них подходит больше.

Чтобы воплотить задуманное, нам потребуется добавить в таблицу стилей main.css несколько новых стилей (листинг 13.9).

Псевдоклассы гиперссылок

Стили из листинга 13.9 задают параметры гиперссылок, расположенных вне полосы навигации. Здесь мы активно используем псевдоклассы гиперссылок.

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

Стили из листинга 13.10 задают параметры гиперссылок полосы навигации. Отметим, что здесь применяются комбинированные стили, содержащие указание на список navbar, который формирует полосу навигации, — так проще и нагляднее.

Вот стиль, задающий параметры первой буквы первого абзаца в контейнере cmain (т. е. в основном содержимом Web-страницы):

#cmain > P:first-child:first-letter { font-size: 18pt;
font-wight: bold }

Он представляет собой комбинированный стиль, содержащий целых три специальных селектора, и весьма сложен. Поэтому рассмотрим его по частям.

- #cmain > P — абзац должен быть непосредственно вложен в контейнер cmain.

- #cmain > P:first-child — помимо того, абзац должен быть первым дочерним элементом своего родителя (данного контейнера).

- #cmain > P:first-child:first-letter — ну и, собственно, указываем на первую букву данного абзаца. Именно к ней будет привязан этот стиль.

Обратим внимание — мы специально указали, что абзац должен быть непосредственно вложен в контейнер cmain. Если мы этого не сделаем, написав так:

#cmain P:first-child:first-letter { font-size: 18pt;
font-weight: bold }

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

Вот два одинаковых стиля, задающих выравнивание текста по центру для первой и второй ячеек каждой строки таблицы:

.table-html-versions TD:first-child,
.table-html-versions TD:nth-child(2) { text-align: center }

Как видим, они представляют собой комбинированный стиль, включающий стилевой класс table-html-versions.

Чтобы данные стили начали действовать на таблицу, нам придется привязать этот стилевой класс к ее тегу <TABLE>:

<TABLE>
<CAPTION>Список версий HTML:</CAPTION>
. . .
</TABLE>

Вот и все. Добавим приведенные стили в таблицу стилей main.css, внесем исправления в Web-страницу index.htm, сохраним их и откроем Web-страницу index.htm в Web-обозревателе. Хороша, правда?

На этом разговор о представлении Web-страниц закончен.