:first-child

The pseudo-class :first-child selects the element that is the first child of the parent.

 

The :first-child pseudo-class applies styles to the first child element of an element. For example, you can use it to style only the first item in a list, or only the first of several paragraphs.

Worth noting that :first-child behaves in the same way as the :nth-child(1) pseudo-class.

Syntax

/* Selects any <p> that is the first element among its siblings */

p:first-child {
  color: blue;
}

/* Selects the first <li> element in a list */

li:first-child {
   border: 1px solid #000;
}

Example

In this example, we’re applying custom styling to a paragraph using p:first-child, you have to remember that :first-child will work globally unless you specify the exact content area that you wish to style.

The first paragraph is styled!

This paragraph is not styled.

This is a heading, style isn’t applied.

This is the third paragraph in a set of divs but not styled either.

HTML

<div class="first-child-demo">
<div>
  <p>The first paragraph is styled!</p>
  <p>This paragraph is not styled.</p>
</div>

<div>
  <h4>This is a heading, style isn't applied.</h4>
  <p>This is the third paragraph in a set of divs but not styled either.</p>
</div>
</div>

CSS

.first-child-demo p:first-child {
    color: white;
    background-color: #ff5722;
}

So, even though we have multiple div elements in this example, the 2nd div does not have a class assigned, which means :first-child will select only the paragraph in the main container.