CSS :only-of-type Selector
The selector :only-of-type in CSS is a pseudo-class selecting an element that is the only sibling of its type. In other words, this pseudo-class allows you to select an element that in the only one of its type within its parent.
This means that the selected element has no siblings of the same type. You can use the :only-of-type pseudo-class when you want to style an element only if it is unique among its siblings in the terms of its type.
For example, consider you have a div element that contains one <p> element and two <span> elements. You can style <p> element by using CSS :only-of-type selector because it is the only one of its type within its parent element.
Syntax of CSS :only-of-type Selector
The general syntax for the :only-of-type selector in CSS is as follows:
element:only-of-type {
/* CSS properties */
}In the above syntax,
element: It represents the type of element you want to target. For example, p, div, span, etc.:only-of-type: It is a pseudo-class that applies the style to an element only if it is the only one of its type within its parent.
How Does :only-of-type Selector Work?
To understand how the :only-of-type selector works, let’s break down its functionality:
- Parent-Specific: The selector is applied to an element based on its parent. If an element is the only one of its type within its parent container, it matches the :only-of-type selector.
- Element Type-Specific: It checks for siblings of the same type. If there are no siblings of the same type, the element matches the selector.
Examples of Using :only-of-type
Consider an example in which you have a <div> element that contains one <p> element and two <span> elements. You want to style the <p> element only if it is the only paragraph inside its parent <div>. Let’s write the code for it.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
p:only-of-type {
color: white;
font-size: 20px;
font-weight: bold;
background-color: red;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<p>This is a unique paragraph element inside the parent div.</p>
<span>This is a span element.</span>
<span>This is another span element.</span>
</div>
</body>
</html>
In this example, the selector p:only-of-type will select the <p> element because it is the only paragraph element inside its parent <div> element, despite there being other types of elements (<span>). Look at the output below.
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
li:only-of-type {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
In this example code, the selector li:only-of-type selects the first <li> element within its parent <ul> element and apply CSS style to it. This is because it is the only list item within its parent <ul>.
Output:
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
input:only-of-type {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Name">
<textarea placeholder="Your message"></textarea>
</form>
<form>
<input type="text" placeholder="Email">
<input type="password" placeholder="Password">
</form>
</body>
</html>
In this code, the selector input:only-of-type will select the <input> in the first form and apply the CSS style because it is the only input of its type (type=”text”) within its parent.
Note: Beginners always do a mistake that they assume the :only-of-type is the same as :only-child. While both are different from each other. The :only-child selector selects an element that is the only child of its parent, while the :only-of-type selector selects an element that is the only one of its type within its parent. So, don’t be confuse.
The :only-of-type pseudo-class provided by CSS is a powerful selector for targeting elements that are unique among their siblings in terms of their type. By understanding its functionality, syntax, and correct usage, you can apply specific styles.
You can also combine :only-of-type selector with other selectors. For example, you might combine it with class or ID selectors. You should try it yourself.
