mozilla
Your Search Results

    :only-child Redirect 1

    Summary

    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> 
    

    Result

    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>
    

    Result


    Specifications

    Specification Status Comment
    Selectors Level 4 Working Draft No change.
    Selectors Level 3 Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 2 1.5 (1.8) 9 9.5 3.1
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 1.0 (1.8) 9 10.0 3.1

     

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar