Copyright © tutorialspoint.com

# 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>
But it will not match the paragraph in this HTML:
    <div>
    <h3>Heading</h3>
    <p>

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

This will produce following result:

First paragraph in div. This paragraph will be indented Second paragraph in div. This paragraph will not be indented But it will not match the paragraph in this HTML:

### Heading

The first paragraph inside the div.
This paragraph will not be effected.

To Become more comfortable - Do Online Practice

Copyright © tutorialspoint.com