:only-of-typeSelektor pseudoklasa CSS reprezentuje dowolny element, który jest rodzeństwa danego typu.
p:only-of-type ( color: red; )Jeśli żaden tag nie poprzedza selektora, będzie pasował do dowolnego tagu (np :only-of-type.). Jeśli poprzedza go inny selektor, zostanie dopasowany na podstawie typu tagu, który pasuje do selektora. Na przykład .example:only-of-typebędzie zachowywać się tak, p:only-of-typejakby .examplezostał zastosowany do elementu akapitu.
Prosty przykład
Jedna lista zawiera tylko jeden element listy. Inna lista zawiera trzy elementy listy. Możemy kierować reklamy na element listy, który jest sam z :only-of-type.
Chociaż być może nie jest to najlepszy przykład, ponieważ :only-childdziałałby tam równie dobrze, ponieważ elementy listy są jedynymi możliwymi elementami podrzędnymi list. Jeśli zamiast tego użyjemy elementów div, moglibyśmy wskazać akapit wewnątrz elementu div, jeśli jest to jedyny akapit, mimo że są tam również inne elementy.
Zauważyć
Dla zabawy możesz osiągnąć taki sam wybór, jak za :only-of-typepomocą :first-of-type:last-of-typelub :nth-of-type(1):nth-last-of-type(1). Te używają jednak dwóch połączonych selektorów, co oznacza, że specyficzność jest dwukrotnie większa niż :only-of-type.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | Każdy | Każdy | Każdy | IE9 + | Każdy | Każdy |