:only-child

Ir para:
  1. Sintaxe
  2. Exemplos
  3. Especificações
  4. Compatibilidade de browser
  5. Ver também

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.

/* Seleciona cada <p>, 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

:only-child

Exemplos

Exemplo básico

HTML

<main>
  <div>
    <i>Eu sou um filho único solitário.</i>
  </div>

  <div>
    <i>Eu tenho irmãos.</i><br>
    <b>Eu também!</b><br>
    <span>Eu também tenho irmãos, <span>mas este é um filho único.</span></span>
  </div>
</main>

CSS

main :only-child {
  color: red;
}

Resultado

Exemplo de lista

HTML

<ol>
  <li>Primeiro
    <ul>
      <li>Essa lista tem apenas um elemento.
    </ul>
  </li>
  <li>Segundo
    <ul>
      <li>Essa lista tem três elementos.
      <li>Essa lista tem três elementos.
      <li>Essa lista tem três elementos.
    </ul>
  </li>
<ol>

CSS

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

Resultado

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':only-child' in that specification.		 Rascunho atual Não é necessário que os elementos selecionados tenham um elemento-pai.
Selectors Level 3
The definition of ':only-child' in that specification.		 Recomendação Definição inicial.

Compatibilidade de browser

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Funcionalidade Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 2 (Yes) 1.5 (1.8) 9 9.5 3.1
Elemento-pai não é necessário 57 ? ? ? 44 ?
Funcionalidade Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico (Yes) (Yes) (Yes) 1.0 (1.8) 9 10 3.1
Elemento-pai não é necessário 57 57 ? ? ? 44 ?

Ver também

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: mdnwebdocs-bot, larimaza
Última atualização por: mdnwebdocs-bot,