:first-child

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

>
/* Выбирает любой <p>, который является первым элементом
   среди своих братьев и сестер */
p:first-child {
  color: lime;
}

Note: Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это больше не требуется.

Синтаксис

:first-child

Примеры

Простой пример

HTML

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Результат

Стилизация списка

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

Результат

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

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:first-childChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 7
Замечания
Полная поддержка 7
Замечания
Замечания Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
Замечания In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera Полная поддержка 9.5Safari Полная поддержка 3.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 4Samsung Internet Android Полная поддержка 1.0
Matches elements with no parentChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 44Safari Нет поддержки НетWebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 52Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.

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