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
Create a free Flash website with our simple, online web design editing platform. Stunning templates
and user-friendly tools make website building easy and fun.
Start Creating your free website now!
The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
| 
