:only-of-type
Volič 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-type
bude chovat, jako p:only-of-type
kdyby .example
bylo 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-child
by 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-type
u :first-of-type:last-of-type
nebo :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ý |