CSS - :only-child

Examples

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> 

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>

Syntax  

:only-child <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a>

Description  

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.

Browser Compatibility  

Specifications  

License