: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

HTML

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

CSS

p:first-child {

  color: green;

  background: black;

  padding: 5px;

}

Result

Browser Support

Desktop

7	12	4	3	9.5	3.1

Tablets / Mobile

≤37	18	4	10.1	4	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu