:first-child CSS

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

Псевдо-класс **`:first-child`** находит любой элемент, являющийся первым в своём родителе.
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [Selectors Level 4](https://drafts.csswg.org/selectors-4/#first-child-pseudo) * [Selectors Level 3](https://drafts.csswg.org/selectors-3/#first-child-pseudo) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/selector.html#first-child)

Синтаксис

/* Selects any <p> that is the first element
   among its siblings */
p:first-child {
  color: lime;
}

Синтаксис

/* Selects any <p> that is the first element among its siblings */ p:first-child { color: lime; }

Примеры

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;
}

Результат

Результат работы псевдокласса :first-child
Результат работы псевдокласса :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; } Результат ![Результат работы псевдокласса :first-child](/workspace/uploads/css/first-child.png)

Содержание

  • Синтаксис
      /* Selects any <p> that is the first element among its siblings */ p:first-child { color: lime; }
  • Значения
    • Примеры
        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; } Результат ![Результат работы псевдокласса :first-child](/workspace/uploads/css/first-child.png)

    В начало