Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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).

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen