CSS :first-child Selector
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 >w3wiki</ p > < h1 >w3wiki</ h1 > < h2 >:first-child Selector</ h2 > < p >w3wiki</ p > < div > < p >GFG</ p > < p >Beginner</ 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 >w3wiki</ 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
Contact Us