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
The Altova MissionKit, recent winner of the Jolt Product Excellence and Productivity Award for Best Development Environment,
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®, MapForce®, and StyleVision® plus 3 additional tools for less than the price of 2.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
| 
