CSS :only-child

The CSS :only-child pseudo-class applies styles to an element that is the only child of its parent. This is useful for targeting and styling elements when they are alone in a container, ensuring unique designs for such cases.

The syntax for the :only-child pseudo-class is:

</>
Copy
selector:only-child {
    property: value;
}

Where:

ParameterDescription
selectorThe element to which the :only-child pseudo-class will apply.
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Examples

1. Styling a Paragraph That Is the Only Child

In this example, a <p> element that is the only child of its parent <div> is styled with a blue text color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:only-child {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>I am the only child.</p>
    </div>
    <div>
        <p>I have siblings.</p>
        <p>I am one of them.</p>
    </div>
</body>
</html>

2. Styling an Image That Is the Only Child

Here, an <img> element that is the only child of its parent <div> is styled with a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img:only-child {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <div>
        <img src="/img/lion.jpg" alt="Only Child Image" width="200">
    </div>
    <div>
        <img src="/img/dragonfly.jpg" alt="I have siblings" width="200">
        <p>Sibling Text</p>
    </div>
</body>
</html>

3. Styling a List Item That Is the Only Child

The only <li> in a parent <ul> is styled with a bold font.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:only-child {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>I am the only item in this list.</li>
    </ul>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</body>
</html>

4. Styling a Heading That Is the Only Child

The only <h1> in a parent <div> is styled with a red underline.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1:only-child {
            text-decoration: underline;
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1>I am the only heading.</h1>
    </div>
    <div>
        <h1>Heading 1</h1>
        <p>Sibling Paragraph</p>
    </div>
</body>
</html>

5. Styling a Nested Element That Is the Only Child

Here, a <span> element that is the only child of a parent <div> is styled with a green background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        span:only-child {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <div>
        <span>I am the only child.</span>
    </div>
    <div>
        <span>Sibling 1</span>
        <span>Sibling 2</span>
    </div>
</body>
</html>