CSS :only-of-type Selector
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 >w3wiki</ 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 >w3wiki</ 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
Contact Us