We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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: larimaza
Última atualização por: larimaza,