CSS :only-of-type

The CSS :only-of-type pseudo-class applies styles to an element that is the only one of its type among its siblings. This pseudo-class is useful for targeting and styling elements in unique scenarios where they are the only one of their kind within a parent container.

The syntax for the :only-of-type pseudo-class is:

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

Where:

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

Examples

1. Styling an Image That Is the Only One of Its Type

In this example, an <img> element that is the only image among its siblings is styled with a blue border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img:only-of-type {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div>
        <img src="/img/lion.jpg" alt="Only Image" width="200">
    </div>
    <div>
        <img src="/img/dragonfly.jpg" alt="Image 1" width="200">
        <img src="/img/lion_small.jpg" alt="Only Image" width="200">
    </div>
</body>
</html>

2. Styling a Heading That Is the Only One of Its Type

The only <h1> element among its siblings is styled with red text color and an underline.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1:only-of-type {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
        <h1>Only Heading</h1>
    </div>
    <div>
        <h1>Heading 1</h1>
        <h1>Another Heading 1</h1>
        <p>Sibling paragraph</p>
    </div>
</body>
</html>

3. Styling a List That Is the Only One of Its Type

The only <ul> element among its siblings is styled with a light gray background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        ul:only-of-type {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>List 2: Item 1</li>
        </ul>
        <ul>
            <li>List 3: Item 1</li>
        </ul>
    </div>
</body>
</html>

4. Styling a Table That Is the Only One of Its Type

The only <table> element among its siblings is styled with a border and light yellow background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        table:only-of-type {
            background-color: lightyellow;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div>
        <table border="1">
            <tr><td>Row 1</td></tr>
            <tr><td>Row 2</td></tr>
        </table>
    </div>
    <div>
        <table border="1">
            <tr><td>Row 1</td></tr>
        </table>
        <table border="1">
            <tr><td>Another Table Row 1</td></tr>
        </table>
    </div>
</body>
</html>

5. Styling a Blockquote That Is the Only One of Its Type

A <blockquote> element that is the only one of its type is styled with a blue border and italic text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        blockquote:only-of-type {
            border-left: 4px solid blue;
            font-style: italic;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div>
        <blockquote>This is the only blockquote in this container.</blockquote>
    </div>
    <div>
        <blockquote>This is the first blockquote.</blockquote>
        <p>This is a sibling paragraph.</p>
        <blockquote>This is the second blockquote.</blockquote>
    </div>
</body>
</html>