:first-child CSS Pseudo Class

Description

The CSS :first-child pseudo-class is a selector used to target and style the first child element of its parent element. It is often used in conjunction with other selectors to apply specific styling to the initial child element within a container, without affecting other child elements.

For example, you can use :first-child to apply unique styles to the first paragraph within a <div> element:

div p:first-child {

  /* CSS rules for the first <p> element inside a <div> */

  color: blue;

  font-weight: bold;

}

Syntax

:first-child {
  /* ... */
}

Example

<div>

   <p>I am the first-child so I am going to look different</p>

   <p>I am the second-child, so nothing is going to change with me!</p>

</div>

<div>

   <h3>I'm not a paragraph, so no change</h3>

   <p>I'm a paragraph, but not the first-child.</p>

</div>

p:first-child {

  color: green;

  background: black;

  padding: 5px;

}

Browser Support

The following table will show you the current browser support for the CSS :first-child pseudo class.

Desktop
12	4	3	9.5	3.1

Tablets / Mobile
18	4	10.1	4.2	1	37

Last updated by CSSPortal on: 1st October 2023