CSS First-Child

The :first-child pseudo class is used to represent the first element of a series of sibling elements. The syntax for :first-child is as follows:

[selector-name]:first-child { [some CSS properties] }

The CSS properties defined above will be applied to the first element and not any of the subsequent elements. Let's take a look at two examples below:

Example 1: Use :first-child to change the first paragraph

CSS Declaration

p:first-child {background-color: #ccc;}

The following HTML code,

<p>This is paragraph 1. <p>This is paragraph 2. <p>This is paragraph 3.

results in the following:

In Example 1, we used :first-child to specify that the first paragraph will have a gray background.

Example 2: Use :first-child to change the first list item

CSS Declaration

li:first-child {text-decoration:underline;}

The following HTML code,

<ul> <li>List item 1 <li>List item 2 <li>List item 3 </ul>

results in the following:

In Example 2, we used :first-child to specify that the first item on the list is underlined.