Open In App

jQuery :only-of-type Selector

Last Updated : 06 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The :only-of-type Selector is an inbuilt selector in jQuery, used to select all the elements that are the only child of their parent. 

Syntax:

$("parent_name : only-of-type")

Example 1: In this example, we are using only-of-type selectors.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <!-- Script to use only-of-type selector -->
    <script>
        $(document).ready(function () {
            $("p:only-of-type").css(
                "color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <!-- Division 1 -->
        <div style="border:1px solid;">
            <p>Geek1 of first div.</p>
            <p>Geek2 of first div.</p>
        </div>
        <br>
        <!-- Division 2 -->
        <div style="border:1px solid;">
            <p>The only Geek of second div.</p>
        </div>
        <br>
        <!-- Division 3 -->
        <div style="border:1px solid;">
            <span>GeeksforGeeks</span>
            <p>The only Geek of third div.</p>
        </div>
    </center>
</body>
 
</html>


Output:

  

In the above example, all the only child element( here p tags ) of their parent( here div tags ) are formatted into green color i.e, “The only Geek of the second div.” and “The only Geek of the third div.”. 

Example 2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <!-- Script to use only-of-type selector -->
    <script>
        $(document).ready(function () {
            $("p:only-of-type").css(
                "color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <!-- Children of division -->
        <h3>Division as a parent</h3>
        <div>
            <p>Geek1 of div.</p>
            <p>Geek2 of div.</p>
        </div>
        <!-- Only child of id -->
        <h3>ID as a parent.</h3>
        <id>
            <p>The only Geek of id.</p>
        </id>
        <!-- Only child of class -->
        <h3>Class as a parent.</h3>
        <class>
            <p>The only Geek of class.</p>
        </class>
        <!-- Only child of body -->
        <h3>Body as a parent.</h3>
        <p>The only Geek of body.</p>
    </center>
</body>
 
</html>


Output:

  

In the above example, all the only child element( here p tags ) of their respective parent are formatted into green color i.e, “The only Geek of id.”, “The only Geek of class.” and “The only Geek of the body.” as every paragraph tag is considered the different child for each parent.



Previous Article
Next Article

Similar Reads

CSS :only-of-type Selector
The :only-of-type selector in CSS represents only those elements that have no siblings of the given type. It is used to set the CSS property to that element. Syntax: :only-of-type { // CSS property } Example 1: In this example, we are using the above-explained selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;:only-o
1 min read
jQuery :only-child Selector
It is a jQuery Selector used to select every element that is the only child of it's parent i.e only a single child is selected. Syntax: $(":only-child")Example 1: In this example, we are using only-child selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery :only-child Selector&lt;/title&gt; &lt;script src= &quot;
1 min read
jQuery :nth-of-type() Selector
The :nth-of-type() is an inbuilt selector in jQuery, used to select all the nth-child elements of the specified parent. Syntax: parent_name : nth-of-type(n|even|odd|algebraic equation)Parameters: It takes a parameter n | even | odd | algebraic equation. ValueDescriptionnSelect the child present at nth index (starting from 1). n must be an integer.e
3 min read
jQuery :first-of-type Selector
The jQuery :first-of-type Selector is used to select all elements that are the first child, of a particular type, of their parent. Syntax: $(":first-of-type")The below examples illustrate the:first-of-type selector in jQuery: Example 1: This example changes the background color to green and the text color to white, of the first heading of their par
2 min read
jQuery :last-of-type Selector
The jQuery :last-of-type Selector is used to select all elements which are the last child of their parent. Syntax: $(":last-of-type") Below are examples that illustrate the :last-of-type selector in jQuery: Example 1: This example changes the background-color to green and text-color to white, of the last element of their parents (div tags). C/C++ C
2 min read
jQuery :nth-last-of-type() Selector
The jQuery :nth-last-of-type() Selector is used to select all child of a parent with the same element name, counting from the last to first. It uses 1-indexed counting. Syntax: element:nth-last-of-type(n|even|odd|formula)Parameters: n: It selects nth element from last.even: It selects every even element from last.odd: It selects every odd element f
2 min read
CSS :read-only Selector
The :read-only selector is used to selecting that element which is readable only. The read-only is used to disable the fields. Mainly read-only pseudo-class represent an element that can’t be edited by the user. Syntax: :read-only { // CSS property } Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; input:-moz-read
1 min read
CSS :only-child Selector
The:only-child selector in CSS is used to match every element that is the only child of its parent. It represents an element without any siblings. Syntax: :only-child { // CSS property } Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;:only-child selector&lt;/title&gt; &lt;style&gt; h1 { color: green; text-align:
2 min read
CSS :nth-of-type() Selector
The :nth-of-type() in css Selector is used to style only those elements which are the nth number of child of its parent element. An n may be a number, a keyword, or a formula. Syntax: :nth-of-type(number) { // CSS Property; } Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notat
2 min read
CSS :first-of-type Selector
The :first-of-type Selector is used to targeting the first child of every element of it's parent. if we want to style the first child of an element without giving a class, we can use it. Syntax: :first-of-type { //property } Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; p:first-of-
1 min read
Article Tags :