CSS :first-child Selector
Last Updated :
04 Aug, 2023
The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the <!DOCTYPE> must be declared for IE8 and earlier versions.
Syntax:
:first-child {
/* CSS property */
}
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< title >first child selector</ title >
< style >
h1 {
color: green;
}
p:first-child {
background-color: green;
color: white;
font-weight: bold;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< p >GeeksforGeeks</ p >
< h1 >GeeksforGeeks</ h1 >
< h2 >:first-child Selector</ h2 >
< p >GeeksforGeeks</ p >
< div >
< p >GFG</ p >
< p >Geeks</ p >
</ div >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< head >
< title >first child selector</ title >
< style >
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
li:first-child {
background: green;
}
body {
width: 70%;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >:first-child Selector</ h2 >
< ul >
< li >Data Structure</ li >
< li >Computer Network</ li >
< li >Operating System</ li >
</ ul >
< ol >
< li >Java</ li >
< li >Ruby</ li >
< li >Pascal</ li >
</ ol >
</ body >
</ html >
|
Output:
Supported Browsers:
- Apple Safari 3.1 and above
- Google Chrome 4.0 and above
- Edge 12.0 and above
- Firefox 3.0 and above
- Opera 9.5 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...