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.


/* 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;


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.


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

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


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