Еще одним примером псевдокласса является :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 в документе.