CSS :first-child Selector


Example

Select and style every <p> element that is the first child of its parent:

p:first-child {
    background-color: yellow;
}

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Version: CSS2


Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:first-child 4.0 7.0 3.0 3.1 9.6

Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.


CSS Syntax

:first-child {
    css declarations;
} Demo


Examples

More Examples


Example

Select and style every <i> element of every <p> element, where the <p> element is the first child of its parent:

p:first-child i {
    background: yellow;
}

Try it yourself »

Example

Select and style the first <li> element in lists:

li:first-child {
    background: yellow;
}

Try it yourself »

Example

Select and style the first child element of every <ul> element:

ul > :first-child {
    background: yellow;
}

Try it yourself »


Related Pages

CSS tutorial: CSS Pseudo classes



Color Picker

colorpicker