:only-child

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

Try it

li:only-child {
  color: fuchsia;
}

b:only-child {
  text-decoration: underline;
}

Stars expected to attend:


    
  
  1. Robert Downey, Jr.
    2. 




Stars yet to confirm:


    
  
  1. Scarlett Johansson
    2. 
  
  2. Samuel L. Jackson
    3. 
  
  3. Chris Pratt
    4. 




The ceremony is going to be held in The Dolby Theatre.

Syntax

css
:only-child {
  /* ... */
}

Examples

Basic example

HTML

html

  
I am an only child.






  
I am the 1st sibling.

  
I am the 2nd sibling.

  

    I am the 3rd sibling,
    
but this is an only child.

CSS

css
div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

Result

A list example

HTML

html
    
  
  1. 
    First
    
      
      
    • This list has just one element.
      • 
    
    
  
    2. 
  
  2. 
    Second
    
      
      
    • This list has three elements.
      • 
      
    • This list has three elements.
      • 
      
    • This list has three elements.
      • 
    
    
  
    3.

CSS

css
li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}

Result

Specifications

Specification
Selectors Level 4
# only-child-pseudo

Browser compatibility

See also