:first-child CSS Pseudo Class

Description

The :first-child pseudo-class sets the style of the first element in the group of sibling elements (having one parent).

Syntax

element: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 &lt;p&gt;, so no change</h3>
<p>I'm a &lt;p&gt;, but not the first-child.</p>
</div>
p:first-child {
color: green;
background: black;
padding: 5px;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
712439.53.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3718410.14Yes