CSS :only-of-type Selector
Last Updated :
29 Aug, 2024
The :only-of-type selector in CSS represents only those elements that have no siblings of the given type. It is used to set the CSS property to that element.
Syntax:
:only-of-type {
// CSS property
}Example 1: In this example, we are using the above-explained selector.
html
<!DOCTYPE html>
<html>
<head>
<title>:only-of-type selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
p:only-of-type {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:only-of-type selector</h2>
<div>
<p>Single child of its parent</p>
</div>
<div>
<p>Child 1 of its parent</p>
<p>Child 2 of its parent</p>
</div>
</body>
</html>
Output:
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>:only-of-type selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
input:only-of-type {
background-color: green;
border: 1px solid black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:only-of-type selector</h2>
<div>
<input type="text" value="Only child">
</div><br>
<div>
<input type="text" value="Child 1 of its parent">
<input type="text" value="Child 2 of its parent">
</div>
</body>
</html>
Output:
Supported Browser: The browser supported by: only-of-type selector are listed below:
- Chrome 1.0
- Edge 12.0
- Opera 9.5
- Firefox 3.5
- Safari 3.1