CSS :only-of-type Selector
Last Updated :
06 Jul, 2023
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
Share your thoughts in the comments
Please Login to comment...