CSS :only-of-type Selector

Posted in CSS Tutorial

Updated on Sep 18, 2024

By Mari Selvan

👁️ 4 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :only-of-type selector in CSS targets an element that is the only one of its type within its parent.

This pseudo-class is useful when you want to apply specific styles to a single element of a certain type if no sibling elements of the same type exist. It enhances precision in your styling, especially in scenarios where you want to style unique items based on their type.

💡 Syntax

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

Syntax

Copied

element:only-of-type {
    /* CSS properties */
}

The :only-of-type selector can be applied to any HTML element, and it will only match if the element is the sole one of its type within its parent container.

📝 Example

Let’s look at an example where the :only-of-type selector is used.

☠️ 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-of-type Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <p>This is a paragraph inside a div.</p>
    </div>

    <div class="container">
        <p>This is another paragraph inside a div.</p>
        <p>This is a second paragraph inside the same div.</p>
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for the paragraph that is the only one of its type within its parent */
p:only-of-type {
    color: blue;
    font-weight: bold;
}

In this example:

The first <p> inside the first <div> is styled because it is the only <p> inside that container.
The paragraphs inside the second <div> are not affected because there is more than one <p> element within the parent.

💬 Usage Tips

The :only-of-type selector can be particularly useful when dynamically generated content might vary in structure, allowing you to target unique elements that stand out.
This pseudo-class only matches elements that are the only ones of their type within their parent, so it works well when you need to ensure exclusive styling for such elements.

⚠️ Common Pitfalls

If more than one element of the same type exists within a parent, :only-of-type will not match any of them. Make sure the element you are targeting is indeed the only one of its type within the container.
Keep in mind that :only-of-type is distinct from :only-child. The former checks only the element type, while the latter checks for a sole child, regardless of the element type.
Performance can be affected when used in very complex document structures or when applied globally, so use it sparingly in such cases.

🎉 Conclusion

The :only-of-type selector is a powerful tool in CSS, providing precise control over elements that are unique within their parent container.

By using this pseudo-class, you can create targeted styles that enhance the appearance of individual elements without affecting others of the same type. This helps streamline your stylesheets, especially in dynamic or complex layouts.