MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:first-child

CSS псевдо-класс :first-child находит любой элемент, являющийся первым в своём родителе.

Синтаксис

element:first-child { /* style properties */ }

Примеры

Пример 1

HTML

<div>
  <span>Этот span лаймовый!</span>
  <span>А этот нет. :(</span>
</div>

CSS

span:first-child {
    background-color: lime;
}

... выглядит как ...

Пример 2 - Использование UL

HTML

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

CSS

li{
  color:red;
}
li:first-child{
  color:green;
}

... выглядит как ...

Спецификации

Спецификация Статус Комментарий
Selectors Level 4
Определение ':first-child' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':first-child' в этой спецификации.
Рекомендация Изначальное определение

Поддержка браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 4.0 3.0 (1.9) 7[1] 9.5 4
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 1.0 1.0 (1.9.1) 7[1] 10.0 3.1

[1] Internet Explorer 7 не обновляет стили, когда элементы добавляются динамически. А в IE 8, если элемент вставлен динамически посредством клика по ссылке, стиль к первому элементу не применяется, пока ссылка не потеряет фокус.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,