CSS :first-child Selector
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 selector is used to select the specified selector, only if it is the first child of its parent.
| Version: | CSS2 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the selector.
| Selector | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
CSS Syntax
More Examples
Example
Select and style every <i> element of every <p> element, where the <p> element is the first child of its parent:
p:first-child i
{
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
