How to use a not:first-child selector in CSS?
This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element.
Syntax:
:not( element ) {
// CSS property
}
Example:
<!DOCTYPE html> <html> <head> <title>not first child selector</title> <style> h1 { color:green; } div ul:not(:first-child) { background-color: green; color:white; font-style:italic; font-weight:bold; width:60%; margin-left:100px; } h1, h2 { text-align:center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>not:first-child selector </h2> <div> <ul style="margin-left:100px"> <li>gfg</li> <li>geeks</li> <li>sudo</li> </ul> <ul> <li>Bca</li> <li>Mca</li> <li>B.Tech</li> </ul> </div> </body> </html> |
Output
Explanation: The above example shows that a <div> is a container Tag. It contains <ul> Tag so it selects all child elements of <div> tag except its first-child.
Supported Browsers: The browser supported by :not:(first-child) selectors are listed below:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 3.0
- Opera 9.6
- Internet Explorer 7.0
.png)
