CSS :first-child pseudo-class
 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
The :first-child pseudo-class is supported in all major browsers.
Note: For :first-child to work in IE, a <!DOCTYPE> must be declared.
 |
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
Complete CSS Reference
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
| 
