CSS :first-child Pseudo-class
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 pseudo-class selects the element that is the first child of its parent
(among a group of sibling elements).
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
CSS Syntax
More Examples
Example
Select and style every <i> element that is the first child of its parent:
i:first-child
{
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
