CSS | :only-child Selector
The :only-child selector in CSS is used to match every element that is the only child of its parent. It represents an element without any siblings.
Syntax:
:only-child {
// CSS property
}
Example 1:
html
<!DOCTYPE html><html> <head> <title>:only-child selector</title> <style> h1 { color: green; text-align: center; } h2 { text-align: center; } div:only-child { color: white; background: green; } div { display: block; margin: 6px; font-size: 17px; padding: 5px 8px; border: solid 2px grey; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>:only-child selector</h2> <div> <div>I am an only child.</div> </div> <div> <div>I am the 1st child.</div> <div>I am the 2nd child.</div> <div>I am the 3rd child, <div> Only child of parent.</div></div> </div> </body></html> |
Output: 
Example 2:
html
<!DOCTYPE html><html> <head> <title>:only-child selector</title> <style> h1 { color: green; text-align: center; } h2 { text-align: center; } li:only-child { color: green; } li { font-size: 20px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>:only-child selector</h2> <ol> <li>Data Structures</li> <ul> <li>Arrays </li> </ul> <li>Languages</li> <ul> <li>C++ </li> <li>Python</li> </ul> <li>Algorithms</li> <ul> <li>Searching Algorithms</li> <li>Sorting Algorithms</li> <ul> <li>Bubble sort </li> </ul> </ul> </ol> </body></html> |
Output: 
Supported Browser: The browser supported by :only-child selector are listed below:
- Google Chrome 2.0 and above
- Edge 12.0 and above
- Firefox 1.5 and above
- Safari 3.1 and above
- Opera 9.5 and above
Please Login to comment...