: alleen-van-type - CSS-trucs

De :only-of-typepseudo-class-selector in CSS vertegenwoordigt elk element dat geen broers of zussen van het opgegeven type heeft.

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

Als er geen tag aan de selector voorafgaat, komt deze overeen met elke tag (bijv. :only-of-type). Als een andere selector eraan voorafgaat, wordt deze vergeleken op basis van het type tag dat overeenkomt met die selector. Zo .example:only-of-typezal gedragen als p:only-of-typewanneer .examplewordt toegepast op een paragraaf element.

Eenvoudig voorbeeld

Een lijst bevat slechts één lijstitem. Een andere lijst bevat drie lijstitems. We kunnen het lijstitem targeten dat alleen is :only-of-type.

Kijk eens naar deze pen!

Hoewel dat misschien niet het beste voorbeeld is, omdat :only-childhet daar net zo goed zou werken omdat lijstitems de enige mogelijke onderliggende elementen van lijsten zijn. Als we in plaats daarvan divs gebruiken, kunnen we een alinea binnen een div targeten als dit de enige alinea is, ondanks dat er ook andere elementen in staan.

Kijk eens naar deze pen!

Noteren

Even terzijde, je zou dezelfde selectie kunnen maken als :only-of-typemet :first-of-type:last-of-typeof :nth-of-type(1):nth-last-of-type(1). Die gebruiken echter twee gekoppelde selectors, wat betekent dat de specificiteit het dubbele is van die van :only-of-type.