Open In App

CSS :only-child Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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: only-childExample 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: only-child2Supported 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


Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads