CSS Pseudo-class :first-child

Description:

The :first-child pseudo-class is used to add special effect to an element that is the first child of some other element.

To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.

Please note that:

• Pseudo-class names are not case-sensitive.

• Pseudo-class are different from CSS classes but they can be combined.

Example:

For example, to indent the first paragraph of all <div> elements, you could use this definition:

<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
     

<div>
<p>
First paragraph in div. This paragraph will be indented
</p>

<p>
Second paragraph in div. This paragraph will not be  indented
</p>
</div>

<div>
<h3>Heading</h3>
<p>

The first paragraph inside the div.
This paragraph will not be effected.
</p>
</div>

This will produce following result: