CSS :first-child pseudo-class

From http://www.w3schools.com (Copyright Refsnes Data)

# 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

From http://www.w3schools.com (Copyright Refsnes Data)