Оглавление

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

Еще одним примером псевдокласса является :first-child. В то время как смежный селектор ссылается на элемент, следующий за указанным элементом в исходном коде документа, селектор псевдокласса :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя. Таким образом, единственным отличием в использовании данных элементов является то, что в последнем случае поставленному условию удовлетворяет только первый дочерний элемент:


<div class="article">
   <p>Этот параграф будет выведен шрифтом большого размера.</p>
   <p>Этот параграф будет выведен шрифтом нормального размера.</p>
</div>


CSS-код будет выглядеть следующим образом:


p {
font-size: 100%
}
.article p:first-child {
font-size: 160%;
}

Поскольку первый абзац является первым дочерним элементом родительского блока div класса article, его текст будет отображаться более крупным шрифтом. Размер шрифта второго абзаца соответствует определенному для всех элементов p в документе.

 

Предупреждение
Internet Explorer 6 не поддерживает псевдокласс :first-child. Как оказалось, браузер IE6 не поддерживает и селектор псевдокласса :first-child, поэтому, если задаваемый с их помощью стиль важен для форматирования страницы, следует найти альтернативный способ адресации.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити