O :only-of-type
seletor de pseudo-classe em CSS representa qualquer elemento que não tenha irmãos do tipo fornecido.
p:only-of-type ( color: red; )
Se nenhuma tag precede o seletor, ele corresponderá a qualquer tag (por exemplo :only-of-type
). Se outro seletor o preceder, ele corresponderá com base no tipo de tag que o seletor corresponder. Por exemplo, .example:only-of-type
se comportará como p:only-of-type
se .example
fosse aplicado a um elemento de parágrafo.
Exemplo Simples
Uma lista contém apenas um único item de lista. Outra lista contém três itens de lista. Podemos direcionar o item da lista que está sozinho com :only-of-type
.
Confira esta Caneta!
Embora talvez esse não seja o melhor exemplo, porque :only-child
funcionaria tão bem, já que os itens de lista são os únicos filhos possíveis de listas. Se usarmos divs em vez disso, poderemos direcionar um parágrafo dentro de uma div se for o único parágrafo, apesar de outros elementos também estarem lá.
Confira esta Caneta!
Anotar
Como uma diversão à parte, você poderia conseguir a mesma seleção como :only-of-type
com :first-of-type:last-of-type
ou :nth-of-type(1):nth-last-of-type(1)
. Esses usam dois seletores em cadeia, o que significa que a especificidade é o dobro de :only-of-type
.
Suporte para navegador
cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
---|---|---|---|---|---|---|
Nenhum | Nenhum | Nenhum | Nenhum | IE9 + | Nenhum | Nenhum |