Структурные псевдоклассы позволяют привязать стиль к элементу 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 }
.
<DIV ID="cmain">
<P>Этот абзац будет набран зеленым цветом.</P>
<BLOCKQUOTE>
<P>Этот абзац — тоже.</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P>И этот — тоже.</P>
<P>А этот — нет.</P>
</BLOCKQUOTE>
</DIV>
Стиль, приведенный в листинге 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 иллюстрирует пример.
Листинг 13.8
P: only-of-type { color: green }
.
<BLOCKQUOTE>
<P>Этот абзац будет набран зеленым цветом.</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P>И этот абзац будет набран зеленым цветом.</P>
<ADDRESS>А этот текст — нет.</ADDRESS>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P>И этот — нет.</P>
<P>И этот — нет.</P>
</BLOCKQUOTE>
Стиль из листинга 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-сайта, часть 8
Да, специальные селекторы — мудреная штука… Разобраться в них без хорошей практики невозможно. Так давайте попрактикуемся.
Вот список параметров Web-страниц нашего Web-сайта, которые мы зададим с помощью специальных селекторов.
— Текст непосещенных и посещенных гиперссылок — не подчеркнут, цвет #576C8C (темно-синий).
