CSS :only-of-type Pseudo-Class – Select the Only Child of Its Tag Name

정의 및 사용 방법

The :only-of-type pseudo-class selector selects an element that is the only one of its tag type (tag name) among its sibling elements.
In other words, it matches an element that is both the first and the last of its kind within the same parent.

"Same tag type" refers to the element's tag name.

For example, p:only-of-type selects a <p> element only if it is the sole <p> element among the children of its parent.

Basic Example

HTML

<div>
    <p>This is the only p element.</p>
    <span>This is a span.</span>
</div>

<div>
    <p>This is the first p element.</p>
    <p>This is the second p element.</p>
</div>

Syntax

Examples

The :only-of-type pseudo-class selector is easier to understand with examples.

When There Are No Siblings of the Same Tag Name

Things to Keep in Mind

The :only-of-type pseudo-class selector selects an element that is the only one of its tag type (tag name) among its sibling elements.

"Same tag type" refers to the element's tag name.

n other words, it means that there must be only one element of that tag name within the parent—not just one matching selector.

Let's look at the following example:

HTML

<style>
    .red-item:only-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<div>
    <p>This is a paragraph element.</p>
    <p class="red-item">Expected to match, but it does not.</p>
    <p>This is a paragraph element.</p>
</div>
<!--
    * Did it select the only (sole) element of the .red-item type?
    * If so, that is incorrect.
    *
    * :only-of-type selects the sole element among sibling elements of the same tag name.
    *
    * .red-item:only-of-type has two parts:
    * => .red-item: The element with the class attribute value 'red-item' has a <p> tag name.
    * => "Type" refers to the tag name type.
    * => In this case, the specific type is <p>.
    * => The sole <p> element must also have the 'red-item' class value to be selected.
    * => Therefore, in this example, there is no matching element.
-->

Be careful! If you don't understand that the specific type refers to the tag name, the :only-of-type pseudo-class may seem like it's not working correctly.