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

CSS :first-child pseudo-class

CSS Reference Complete CSS Reference

Example

In the example below, the selector matches any p element that is the first child of another element (here, the first p element is the first child of the body element):

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

<body>
<p>This is some text.</p>
<p>This is some text.</p>
</body>
</html>

Try it yourself »

More examples at the bottom of this page.

Definition and Usage

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The :first-child pseudo-class is supported in all major browsers.

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

Examples

Try it Yourself - Examples

Match the first i element in p elements
In this example, the selector matches the first i element in every p element.

Match all i elements in all first child p elements
In this example, the selector matches all i elements in p elements that are the first child of another element.

Match the first list item in lists
In this example, the selector matches the first li element in lists.

Match the first child of all list items
In this example, the selector matches the first child of all li elements.

Related Pages

CSS tutorial: CSS Pseudo classes

CSS Reference Complete CSS Reference

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