A :only-childpropriedade do seletor de pseudo-classe em CSS representa um elemento que possui um elemento pai e cujo elemento pai não tem nenhum outro elemento filho. Seria o mesmo que :first-child:last-childou :nth-child(1):nth-last-child(1), mas com uma especificidade inferior.
div p:only-child ( color: red; )Por exemplo, se aninharmos parágrafos dentro de um ...
This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent
Agora podemos estilizar o único
de nosso primeiro filho . O subsequente e seus filhos nunca serão estilizados, pois o contêiner pai contém mais de um filho (ou seja, as tags p).
p:only-child ( color:red; )Também poderíamos misturar pseudo classes adicionais como este exemplo que seleciona o primeiro parágrafo dentro de nosso div aninhado e o filho único de div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childnão funcionará como um seletor se seu elemento pai contiver mais de um filho com uma tag idêntica. Por exemplo…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Isso resultará em nenhum div herdando a cor vermelha, pois o pai contém mais de 1 filho (os 3 divs sem nome).
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 4 | 3,5 | 9 | 12 | 3,2 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 | 3,2 |