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>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: The browser supported by :first-child selector are listed below:
- 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
Please Login to comment...