Definition and Usage
The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
Syntax
parent child:only-child { property: value; }
Examples
Basic example
span:only-child { color: red; }
<div> <span>This span is the only child of its father</span> </div> <div> <span>This span is one of the two children of its father</span> <span>This span is one of the two children of its father</span> </div>
Reference result
This span is the only child of its father
This span is one of the two children of its father
This span is one of the two children of its father
A list example
li li { list-style-type: disc; } li:only-child { color: #6699ff; font-style: italic; list-style-type: square; }
<ol> <li>First <ul> <li>This is only child element </ul> </li> <li>Second <ul> <li>This list has two elements <li>This list has two elements </ul> </li> <li>Third <ul> <li>This list has three elements <li>This list has three elements <li>This list has three elements </ul> </li> <ol>
- First
- This list has only one element
- Second
- This list has two elements
- This list has two elements
- Third
- This list has three elements
- This list has three elements
- This list has three elements
Another example
p:only-child { background: #6699ff; width: 350px; }
<div> <p>This is a paragraph with :only-child</p> </div>
This is a paragraph with :only-child
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 2 | 1.5 (1.8) | 9 | 9.5 | 3.1 |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 1.0 (1.8) | 9 | 10.0 | 3.1 |