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
Please Login to comment...