CSS | :only-of-type Selector
The :only-of-type selector in CSS represents only those element that has 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:
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
Please Login to comment...