:only-child CSS Pseudo Class
Description
The :only-child pseudo-class applies to a child only if it is the only parent. Same as using :first-child:last-child or :nth-child(1):nth-last-child(1).
Syntax
element:only-child { … }
Example
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st sibling.</div>
<div>I am the 2nd sibling.</div>
<div>I am the 3rd sibling, <div>but this is an only child.</div></div>
</div>div:only-child {
color: red;
}
div {
display: inline-block;
margin: 6px;
outline: 1px solid;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 2 | 1.5 | 9.5 | 3.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| ≤37 | 18 | 4 | 10.1 | 3.1 | Yes |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited