CSS :only-child Selector

Posted in CSS Tutorial

Updated on Sep 16, 2024

By Mari Selvan

👁️ 5 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :only-child selector in CSS is used to target an element that is the only child of its parent. This means the element has no siblings.

This pseudo-class is particularly useful when you want to apply styles to an element that is unique within its parent container.

💡 Syntax

The signature of the :only-child Selector is as follows:

Syntax

Copied

element:only-child {
    /* CSS properties */
}

element is the tag or type of element you are targeting (e.g., <div>, <p>, <li>, etc.).
The :only-child selector applies only if the element is the only child of its parent.

📝 Example

Below is an example demonstrating the use of the :only-child selector in HTML and CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :only-child Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <p>This paragraph is the only child of its parent div.</p>
    </div>
    
    <div class="container">
        <p>This is one child.</p>
        <p>This is another child.</p>
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for elements that are the only child of their parent */
p:only-child {
    color: blue;
    font-weight: bold;
}

/* General paragraph styles */
p {
    color: black;
    font-size: 16px;
}

In this example:

The first <p> tag inside the .container div will be styled with blue text and bold font because it is the only child of its parent.
The second container has two <p> elements, so neither will get the :only-child styles.

💬 Usage Tips

The :only-child selector works well when you need to style elements that have no siblings. It is a clean way to apply conditional styling without adding extra classes or JavaScript.
You can use this selector for various elements such as lists, paragraphs, and divs, depending on your layout needs.
Combine :only-child with other pseudo-classes like :hover for more specific styling.

📝 Example: Combining with Other Selectors

CSS

Copied

/* Style only-child paragraphs on hover */
p:only-child:hover {
    background-color: yellow;
}

In this case, the style will apply only when hovering over paragraphs that are the only child of their parent.

⚠️ Common Pitfalls

Targeting non-unique elements: The :only-child selector will not work if there are multiple child elements. Ensure that the element you are targeting is truly the only child of its parent.
Specificity issues: Sometimes you may need to increase the specificity of the selector to override other styles. For example, combining :only-child with a class name can help prevent conflicts.

📝 Example of Incorrect Usage

CSS

Copied

/* This will not work as expected if there are multiple <li> items */
li:only-child {
    background-color: lightgray;
}

If an li has siblings, the style won't apply.

🎉 Conclusion

The :only-child selector is a handy tool for styling elements that are the sole child of their parent. This can be particularly useful for form elements, navigation lists, or any layout where you want to apply styles conditionally. With this selector, you can enhance the flexibility and cleanliness of your CSS code without needing additional classes or complex scripts.