CSS :only-of-type

The :only-of-type CSS pseudo-class represents an element that has no siblings with the same element name. It selects only elements that are the only one of their type within the parent element.

For example, if you have multiple <p> elements within a <div> and you want to style only the <p> that is the only one within the <div>, you can use the :only-of-type pseudo-class.

Example:

Let's use some fictional data to demonstrate how the :only-of-type pseudo-class works:

<style>
    #example1 div p:only-of-type{
    color:red;
    }
    </style>


 <div>
                <p>First paragraph</p>                
 </div>
 <div>
                <p>First paragraph</p>
                <p>Second paragraph</p>
 </div>

Result:

First paragraph

Second paragraph

In the example above, the first <p> element is styled differently because it is the only <p> element within the <div> parent.