:only-of-type CSS Pseudo Class

The :only-of-type pseudo-class in CSS is used to select an element that is the only one of its type among its sibling elements. In other words, it matches an element if no other sibling shares the same element type. This pseudo-class allows developers to apply styles selectively when an element stands alone in its category within its parent, which can be particularly useful for layouts, typography, or unique visual treatments.

Unlike the :first-child or :last-child pseudo-classes, which only consider an element's position relative to all siblings, :only-of-type specifically checks the type of the element - meaning its tag name - ignoring other types of sibling elements.

One common use case is styling a lone heading in a section differently from multiple headings. For instance, if you want to give special styling to a paragraph that is the only paragraph in a container, :only-of-type can accomplish this without needing to add extra classes.

Here’s an example:

<section>
  <p>This paragraph is the only paragraph in this section.</p>
  <span>Some other element</span>
</section>

<section>
  <p>First paragraph in this section.</p>
  <p>Second paragraph in this section.</p>
</section>

p:only-of-type {
  font-weight: bold;
  color: darkblue;
}

In this example:

• The paragraph in the first <section> will appear bold and dark blue because it is the only <p> element in that section.
• Neither paragraph in the second <section> will be affected because there is more than one <p> element there.

The :only-of-type pseudo-class is often combined with other selectors, such as class selectors, to target elements more specifically. For instance:

article p:only-of-type {
  font-style: italic;
}

Here, only paragraphs that are the sole <p> inside an <article> will be italicized. This is useful for maintaining visual consistency when content may vary dynamically.

Additionally, :only-of-type works with pseudo-elements like ::before and ::after for enhanced styling of isolated elements.