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>
<div>child of parent.</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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Jul, 2023
Like Article
Save Article