: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.

A pseudo-classe de CSS :only-child representa um elemento sem nenhum elemento-irmão. É o mesmo que :first-child:last-child ou :nth-child(1):nth-last-child(1), mas com uma especificidade mais baixa.

css
/* Seleciona cada 
, mas apenas se for o */
/* único filho de seu elemento-pai */
p:only-child {
  background-color: lime;
}

Nota: Originalmente, foi definido que o elemento selecionado deveria ter um elemento-pai. A partir de Selectors Level 4, isso não é mais necessário.

Sintaxe

Error: could not find syntax for this item

Exemplos

Exemplo básico

HTML

html

  

    Eu sou um filho único solitário.
  


  

    Eu tenho irmãos.

    Eu também!

    Eu também tenho irmãos, mas este é um filho único.

CSS

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

Resultado

Exemplo de lista

HTML

html
    
  
  1. 
    Primeiro
    
      
      
    • Essa lista tem apenas um elemento.
      • 
    
    
  
    2. 
  
  2. 
    Segundo
    
      
      
    • Essa lista tem três elementos.
      • 
      
    • Essa lista tem três elementos.
      • 
      
    • Essa lista tem três elementos.
      • 
    
    
  
    3.

CSS

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

Resultado

Especificações

Specification
Selectors Level 4
# only-child-pseudo

Compatibilidade com navegadores

Ver também