CSS :first-child pseudo-class

Complete CSS Reference

Definition

The :first-child pseudo-class adds a special style to an element that is the first child of some other element.

Note: For :first-child to work in IE a <!DOCTYPE> must be declared.

Example 1 - Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

<style type="text/css">
p:first-child
{
color:blue
} 
</style>

<p>I am a strong man.</p>
<p>I am a strong man.</p>

Try it yourself!

Example 2 - Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

<style type="text/css">
p > i:first-child
{
color:blue
} 
</style>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

Try it yourself!

Example 3 - Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:

<style type="text/css">
p:first-child i
{
color:blue
} 
</style>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

Try it yourself!

Complete CSS Reference