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

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

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

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

Описание

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

Пример:

<!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-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь