:first-child CSS Pseudo Class
Description
The CSS :first-child pseudo-class is a selector used to target and style the first child element of its parent element. It is often used in conjunction with other selectors to apply specific styling to the initial child element within a container, without affecting other child elements.
For example, you can use :first-child to apply unique styles to the first paragraph within a <div> element:
div p:first-child {
/* CSS rules for the first <p> element inside a <div> */
color: blue;
font-weight: bold;
}
In this example, the CSS rules will only apply to the first
<p> element found within a <div> element, leaving other <p> elements within the same container unaffected.
Syntax
:first-child {
/* ... */
}
Example
<div>
<p>I am the first-child so I am going to look different</p>
<p>I am the second-child, so nothing is going to change with me!</p>
</div>
<div>
<h3>I'm not a paragraph, so no change</h3>
<p>I'm a paragraph, but not the first-child.</p>
</div>p:first-child {
color: green;
background: black;
padding: 5px;
}Browser Support
The following table will show you the current browser support for the CSS :first-child pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 4 | 3 | 9.5 | 3.1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 4.2 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023