only-child property CSS Reference



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>
  1. First
    • This list has only one element
  2. Second
    • This list has two elements
    • This list has two elements
  3. 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

Relative articles