Ниже представлена разметка простого неупорядоченного списка:

<ul>
   <li>Первый пункт</li>
   <li>Второй пункт</li>
   <li>Третий пункт</li>
   <li>Четвертый пункт</li>
</ul>

С помощью селектора псевдокласса first-child можно изменить стиль первого пункта списка, не повлияв при этом на оформление соседних элементов. Он позволяет применить стиль к первому элементу внутри контейнера ul, как показано на рис. 2.10:

li:first-child {
color: red;
}

Рис. 2.10. Первый пункт списка отображается красным цветом

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