W3cubDocs

/CSS

:first-child

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

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

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:first-child

Examples

Basic example

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

Result

Styling a list

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

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':first-child' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':first-child' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of ':first-child' in that specification.
Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
:first-child 4 12 3 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.
9.5 3.1
Matches elements with no parent 57 79 52 No 44 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:first-child ≤37 18 4 10.1 4 1.0
Matches elements with no parent 57 57 52 43 No 7.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child