Книга: HTML, XHTML и CSS на 100%

Псевдокласс :first-child

Псевдокласс :first-child

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

Со слов это тяжело понять, поэтому рассмотрите примеры, представленные в данном разделе, и вам все станет ясно.

В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним по отношению к элементу DIV. Проще говоря, это правило запрещает отступ для первого абзаца элемента DIV:

div > p:first-child { text-indent: 0 }

Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:

<p>Последний P перед примечанием.

<div>

<p>Первый P внутри примечания.

</div>

Он не сопоставляется элементу P в следующем фрагменте, так как он второй, а первый дочерний элемент DIV теперь – H2:

<p>Последний P перед примечанием.

<div>

<h2>Примечание</H2>

<p>Первый P внутри примечания.

</div>

В следующем примере устанавливается ширина шрифта bold для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:

p:first-child em { font-weight : bold }

Обратите внимание, что, поскольку безымянные блоки не являются частью дерева документа, они не учитываются во время определения первого дочернего элемента. Например, EM в этом примере является первым дочерним элементом по отношению к P:

<p>Это <em>полужирный</em> текст.</p>

Чтобы лучше разобраться, создайте простую страницу и поэкспериментируйте с ее стилем, используя псевдоклассы. Например, изменяя размер шрифта следующим правилом:

font-weight : bold

Оглавление книги