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

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


12.0+	7.0+	3.0+	4.0+	9.6+	3.1+

Описание

CSS псевдо-класс :first-child позволяет выбрать только первый дочерний элемент внутри родителя.

Ниже мы рассмотрим пример с псевдо-классом :first-child, применённым к элементу <p>. Обратите внимание, что стиль применяется только к первому, расположенному в коде, элементу <p> и третьему, так как первый элемент является и первым дочерним элементом для <body>, а третий будет первым дочерним элементом уже относительно <div>.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      p:first-child { color: red; }
    </style>
  </head>

  <body>

    <p>Этот абзац является первым дочерним элементом своего родителя(body).</p>
    <h1>Добро пожаловать!</h1>
    <p>Этот абзац является третьим дочерним элементом своего родителя(body).</p>

    <div>
      <p>Этот абзац является первым дочерним элементом своего родителя(div).</p>
      <p>Этот абзац является вторым дочерним элементом своего родителя(div).</p>
    </div>

  </body>
</html>

Результат данного примера:

Этот абзац является первым дочерним элементом своего родителя(body).

Добро пожаловать!

Этот абзац является третьим дочерним элементом своего родителя(body).

Этот абзац является первым дочерним элементом своего родителя(div).

Этот абзац является вторым дочерним элементом своего родителя(div).