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

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

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

<DIV> P:first-child { text-indent: 0 }

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

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

<DIV class="note">

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

Однако в следующем фрагменте он не сопоставляется элементу Р, так как он второй, а первым дочерним элементом DIV является теперь тег <Н2>:

<Р>Последний Р перед примечанием. <DIV class="note">

<Н2>Примечание</Н2>

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

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

Р:first-chiId EM { font-weight: bold }

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

<Р>Это <ЕМ>жирный</ЕМ> текст.</Р>

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

Обычно браузеры по-разному отображают просмотренные и не просмотренные ссылки. В CSS предусмотриваются псевдоклассы: link и: visited для разли­чения этих ссылок и задания им своего стиля:

- псевдокласс: link применяется, если пользователь не просматривал ссылку;

- псевдокласс: visited применяется, если пользователь просматривал ссылку.

В HTML псевдоклассы ссылок применяются к тегам <А> с атрибутом href. Таким образом, следующие два объявления CSS эквивалентны:

A:link { color: red }

:link {color: red }

Допустим, пользователь просмотрел такую ссылку:

<А class="external" href="https://yoursite.com/">nepeйти</A>

Тогда она будет представляться синим цветом согласно следующему правилу:

A.external:visited { color: blue }