Листинг 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 иллюстрирует пример.