: pouze typu - Triky CSS

Anonim

:only-of-typeVolič pseudo-třídy v CSS znamená jakýkoliv prvek, který nemá žádné sourozence daného typu.

p:only-of-type ( color: red; )

Pokud selektor předchází žádný tag, bude odpovídat libovolnému tagu (např. :only-of-type). Pokud jej předchází jiný selektor, bude uzavřeno na základě typu značky, které selektor odpovídá. Například se .example:only-of-typebude chovat, jako p:only-of-typekdyby .examplebylo použito na prvek odstavce.

Jednoduchý příklad

Jeden seznam obsahuje pouze jednu položku seznamu. Další seznam obsahuje tři položky seznamu. Můžeme cílit na položku seznamu, se kterou je sám :only-of-type.

Podívejte se na toto pero!

I když to možná není nejlepší příklad, protože :only-childby tam stejně dobře fungoval , protože položky seznamu jsou jedinými možnými potomky seznamů. Pokud místo toho použijeme divs, mohli bychom zacílit na odstavec uvnitř div, pokud je to jediný odstavec, a to navzdory tomu, že jsou tam i jiné prvky.

Podívejte se na toto pero!

Poznamenat

Kromě zábavy můžete dosáhnout stejného výběru jako :only-of-typeu :first-of-type:last-of-typenebo :nth-of-type(1):nth-last-of-type(1). Ti však používají dva zřetězené selektory, což znamená, že specificita je dvojnásobná :only-of-type.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný Žádný IE9 + Žádný Žádný