: apenas do tipo - CSS-Tricks

Anonim

O :only-of-typeseletor 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-typese comportará como p:only-of-typese .examplefosse 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-childfuncionaria 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-typecom :first-of-type:last-of-typeou :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