jQuery :only-of-type Selector

Quiz

The :only-of-type selector in jQuery is used to select elements that are the only child of their type within their parent.

Syntax

Following is the syntax of jQuery :only-of-type Selector −

$(":only-of-type")

Parameters

This selector targets elements that are the only child of their type within their parent.

Example

In the following example, we are using the jQuery :only-of-type Selector to select each <p> element that is the only <p> element of its parent (<div>)−

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p:only-of-type").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div style="border: 1px solid black;">
        <p>This paragraph is the only one of its type within the parent div.</p>
        <p>This paragraph is another paragraph within the parent div.</p>
    </div><br>
    <div style="border: 1px solid black;">
        <p>This paragraph is the only one of its type within the parent div.</p>
    </div><br>
    <div style="border: 1px solid black;">
        <p>This paragraph is the only one of its type within the parent div.</p>
    </div>
</body>
</html>

After executing the above program, it applies yellow background color to the only paragraph of its type within the div.

jquery_ref_selectors.htm

Print Page