The :only-of-type selector matches elements that are the only child of its type.
The p:only-of-type matches a paragraph only if it is the only paragraph inside its parent.
The :only-of-type and the :only-child selectors have similarities, except that the :only-child selector selects the element if its parent has no other children of any type.
Version
Syntax
:only-of-type {
css declarations;
}
Example of the :only-of-type selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:only-of-type {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:only-of-type selector example</h2>
<div>
<p>Lorem ipsum is simply dummy text.</p>
</div>
<div>
<p>Lorem ipsum is simply dummy text.</p>
<p>Lorem ipsum is simply dummy text.</p>
</div>
</body>
</html>
Browser support
4.0+ | 12.0+ | 3.5+ | 3.2+ | 10.0+ |
Practice Your Knowledge
What does the ':only-of-type' pseudo-class represent in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.