CSS :only-of-type Pseudo-Class

CSS :only-of-type Pseudo-Class

The CSS :only-of-type pseudo-class selects an element that has no siblings of the same HTML element type. Unlike :only-child, it can match an element even when its parent contains other types of elements.

:only-of-type Syntax

selector:only-of-type {
  property: value;
}

The :only-of-type pseudo-class matches an element when no other element of the same type shares its immediate parent.

Basic Example

p:only-of-type {
  color: #006699;
}

Selects a paragraph when it is the only paragraph among its siblings.

Class Selector

.notice:only-of-type {
  background-color: #eaf6fc;
}

Selects an element with the notice class when no sibling has the same element type. The class does not determine which siblings are counted.

Direct Child Selector

.content > p:only-of-type {
  font-weight: bold;
}

Selects a paragraph directly inside .content when it has no paragraph siblings.

No Parentheses

The :only-of-type pseudo-class does not accept arguments and is written without parentheses.

How :only-of-type Works

The browser checks the element types of siblings sharing the same parent. If no sibling has the same element type as the element being tested, it matches :only-of-type.

HTML Example

<div class="content">
  <h3>Section Heading</h3>
  <p>Only paragraph</p>
  <button>Continue</button>
</div>

CSS Example

.content > p:only-of-type {
  color: #006699;
}

The paragraph matches because it is the only <p> element among its siblings. The heading and button do not affect the paragraph count.

One Element of Each Type

In this example, the heading, paragraph, and button each match :only-of-type because each has a different element type.

Immediate Siblings Only

Elements in other containers or nested inside descendants do not affect the match.

Equivalent Conditions

p:first-of-type:last-of-type {
  color: #006699;
}

This selector matches the same paragraphs as p:only-of-type, although it has greater specificity.

Selecting a Single Element of Its Type

Use :only-of-type when a particular HTML element should receive special styling if no sibling of the same type exists.

HTML Example

<section class="message-box">
  <h3>Account Updated</h3>
  <p>Your settings have been saved.</p>
</section>

CSS Example

.message-box > p:only-of-type {
  padding: 16px;
  background-color: #eaf6fc;
}

The paragraph receives the special styling because it is the only paragraph in the message box, even though a heading is also present.

Single Image

.article-content > img:only-of-type {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

Centers an image when it is the only image element directly inside the article content container.

Single Button

.actions > button:only-of-type {
  width: 100%;
}

Makes a button fill the available width when it is the only button among its siblings.

Multiple Element Types

Elements of different types can each match :only-of-type within the same parent.

HTML Example

<div class="content">
  <h2>Page Title</h2>
  <p>Page description</p>
  <a href="/index.html">Home</a>
</div>

CSS Example

.content > :only-of-type {
  border-left: 3px solid #006699;
}

All three child elements match because the parent contains only one <h2>, one <p>, and one <a> element.

Different Heading Levels

<div>
  <h2>Main Section</h2>
  <h3>Subsection</h3>
</div>

Both headings match :only-of-type because <h2> and <h3> are different element types.

Nested Elements

<div class="content">
  <section>
    <p>Nested paragraph</p>
  </section>
  <p>Direct paragraph</p>
</div>

The direct paragraph matches :only-of-type because the nested paragraph has a different parent. The nested paragraph also matches within its own section.

Multiple Siblings of the Same Type

When two or more elements of the same type share a parent, none of those elements match :only-of-type.

HTML Example

<div class="content">
  <h3>Section Heading</h3>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

CSS Example

.content > p:only-of-type {
  color: #006699;
}

Neither paragraph matches because each has another paragraph sibling.

The Heading Still Matches

.content > h3:only-of-type {
  font-weight: bold;
}

The heading matches because it is the only <h3> element among its siblings.

Hidden Siblings Still Count

<div class="content">
  <p>Visible paragraph</p>
  <p hidden>Hidden paragraph</p>
</div>

Neither paragraph matches :only-of-type. The hidden paragraph remains an element sibling of the same type.

Classes and Element Types

The :only-of-type pseudo-class considers HTML element types, not class names or IDs.

HTML Example

<div class="content">
  <p class="featured">Featured paragraph</p>
  <p>Regular paragraph</p>
</div>

CSS Example

p.featured:only-of-type {
  color: #006699;
}

The featured paragraph does not match because another paragraph shares the same parent. Its class does not change which siblings are considered.

Different Classes, Same Type

<div>
  <div class="featured">Featured card</div>
  <div class="regular">Regular card</div>
</div>

Neither inner <div> matches :only-of-type, even though the two elements have different classes.

Checking for a Single Class Match

.card:nth-child(1 of .card):nth-last-child(1 of .card) {
  border-color: #006699;
}

This selector matches a .card when it is the only sibling with that class. It uses the filtered :nth-child() and :nth-last-child() selectors instead of counting by element type.

Choosing the Right Selector

Use :only-of-type for a single element of a particular HTML type. Use filtered structural selectors when the number of siblings matching a class or another selector matters.

Related Pseudo-Classes

Several structural pseudo-classes select elements based on sibling relationships and element types.

Comparison

Equivalent Selector

p:only-of-type {
  color: #006699;
}
p:first-of-type:last-of-type {
  background-color: #eaf6fc;
}

Both selectors match paragraphs that have no paragraph siblings, but the second selector has greater specificity.

Only Child vs. Only of Type

<div>
  <h3>Heading</h3>
  <p>Paragraph</p>
</div>

The paragraph matches :only-of-type but not :only-child. It is the only paragraph, but it is not the only element child.

Dynamic Content

The :only-of-type pseudo-class responds automatically when sibling elements are added, removed, or changed.

Initial HTML

<div class="message-box">
  <h3>Notification</h3>
  <p>Your changes have been saved.</p>
</div>

CSS

.message-box > p:only-of-type {
  background-color: #eaf6fc;
}

The paragraph initially matches because it has no paragraph siblings.

Adding Another Paragraph

const box = document.querySelector(".message-box");
const paragraph = document.createElement("p");
paragraph.textContent = "Additional information";
box.appendChild(paragraph);

After the new paragraph is added, neither paragraph matches :only-of-type.

Adding a Different Element Type

Adding a button or another heading does not affect whether the paragraph matches, because those elements are not paragraphs.

Removing a Same-Type Sibling

If one paragraph is removed, the remaining paragraph matches :only-of-type again.

:only-of-type Specificity

The :only-of-type pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

p {
  color: #333;
}
p:only-of-type {
  color: #006699;
}

When both rules match and other cascade factors are equal, the :only-of-type rule takes precedence because it has greater specificity.

Equivalent Conditions, Different Specificity

Although :only-of-type matches the same elements as :first-of-type:last-of-type, the combined selector contributes two pseudo-class specificity values instead of one.

Practical Uses

The :only-of-type pseudo-class is useful for adjusting styles when a container includes exactly one element of a particular HTML type.

Single Paragraph

.message-box > p:only-of-type {
  padding: 16px;
  background-color: #eaf6fc;
}

Applies special styling when a message box contains one paragraph, even if it also contains a heading or button.

Single Image

.article-content > img:only-of-type {
  display: block;
  margin-inline: auto;
}

Centers an image when no other image element shares its parent.

Single Button

.actions > button:only-of-type {
  width: 100%;
}

Expands a button when it is the only button element among its siblings.

Single Heading of a Level

section > h3:only-of-type {
  border-bottom: 2px solid #006699;
}

Styles a third-level heading when no other third-level headings share its parent.

Single Table

.content > table:only-of-type {
  width: 100%;
}

Applies a layout rule when a content container has only one table element.

Limitations

The :only-of-type pseudo-class depends on HTML element types and immediate sibling relationships.

Counts by Element Type

Different classes or IDs do not change the type-based matching behavior.

Does Not Require an Only Child

An element can match even when its parent contains several other child elements of different types.

Hidden Elements Still Count

Elements hidden with display: none or the hidden attribute still prevent a match when they have the same element type.

Immediate Parent Only

The pseudo-class considers siblings sharing the same immediate parent. Nested descendants are not counted as siblings.

Different Heading Levels Are Different Types

Elements such as <h2> and <h3> are counted as different types, even though both are headings.

No Class-Based Counting

The pseudo-class cannot determine whether an element is the only sibling matching a particular class. Use filtered structural selectors for that purpose.

Dynamic Structure

Adding or removing siblings of the same type can change which elements match.

Best Practices

• Use :only-of-type when an element has no siblings of the same HTML element type.
• Combine it with an element selector when targeting a specific HTML element.
• Use a direct child combinator when matching a specific parent-child relationship.
• Remember that siblings of different element types do not prevent a match.
• Use :only-child when the element must have no element siblings of any type.
• Do not assume classes or IDs change which siblings are counted.
• Remember that hidden elements of the same type still prevent a match.
• Use filtered :nth-child() selectors when counting elements by class.
• Consider changes to the DOM when styling dynamically generated content.
• Test selectors with mixed element types to confirm the intended behavior.

:only-of-type Example

This example compares a container with one paragraph and a heading against a container with two paragraphs. The single paragraph receives a light blue background and blue border because it is the only paragraph of its type. The two paragraphs in the second container retain their standard styling.

HTML

<div class="only-of-type-demo">
  <div class="demo-group">
    <h3>Single Paragraph</h3>
    <p>Only paragraph</p>
  </div>
  <div class="demo-group">
    <h3>Multiple Paragraphs</h3>
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </div>
</div>

CSS

.only-of-type-demo .demo-group {
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
}
.only-of-type-demo h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.only-of-type-demo p {
  padding: 12px;
  margin: 0 0 6px;
  border: 2px solid #ccc;
  background-color: #f5f5f5;
}
.only-of-type-demo p:last-child {
  margin-bottom: 0;
}
.only-of-type-demo p:only-of-type {
  border-color: #006699;
  background-color: #eaf6fc;
  color: #006699;
  font-weight: bold;
}

Browser Result

Play in Editor

Note: Only paragraph receives the blue styling because it has no paragraph siblings. First paragraph and Second paragraph do not match because they share the same parent and element type.

Browser Support

Baseline: Widely available. The :only-of-type pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. It is part of the established CSS structural pseudo-class selectors.

For current compatibility information, visit Can I Use? .

Specifications

The :only-of-type pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It matches an element that has no siblings of the same element type.

Selectors Level 4 - :only-of-type