Only of Type Pseudo-Classes in CSS

:only-of-type

The "Only of Type" pseudo-classes in CSS are selectors that allow you to target and style elements that are the only ones of their specific type within their parent container. These pseudo-classes help you identify and style elements that are unique in terms of their HTML tag name within their parent container

The :only-of-type pseudo-class selects elements that are the only ones of their type within their parent container, regardless of their position or order.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Structural Pseudo-classes</title>
    <style>
      p:only-of-type {
        color: red;
      }
      li:only-of-type {
        color: blue;
      }
      span:only-of-type {
        color: orangered;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:only-of-type</h3>

    <p>P-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>

    <ul>
      <li>Apple</li>
    </ul>

    <div>
      <p>P-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
      <span>Span Tag</span>
      <b>Bold Tag</b>
    </div>
  </body>
</html>

Live Preview

p:only-of-type:
1. This selector targets  elements that are the only ones of their type within their parent containers.
2. color: red; sets the text color of these single  elements to red.
li:only-of-type:
1. This selector targets <li> elements that are the only ones of their type within their parent containers.
2. color: blue; sets the text color of these single <li> elements to blue.
span:only-of-type:
1. This selector targets  elements that are the only ones of their type within their parent containers.
2. color: orangered; sets the text color of these single  elements to orangered.

In summary, this code identifies and styles elements of different types ( , <li> , and  ) within their parent containers. If any of these elements are the only ones of their respective types within their containers, their text color will be adjusted as specified. This allows for specific styling of unique elements within the context of their parent containers.

Using "Only of Type" pseudo-classes allows you to apply styles to elements that are unique in terms of their tag name within a parent container. These pseudo-classes are valuable for creating targeted and precise styling effects when you have multiple types of elements within the same context.