{"id":14244,"date":"2011-09-06T20:25:49","date_gmt":"2011-09-07T03:25:49","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14244"},"modified":"2019-09-05T19:24:38","modified_gmt":"2019-09-06T02:24:38","slug":"only-of-type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-of-type\/","title":{"rendered":":only-of-type"},"content":{"rendered":"

The :only-of-type<\/code> pseudo-class selector<\/a> in CSS<\/abbr> represents any element that has no siblings of the given type.<\/p>\n

p:only-of-type {\r\n  color: red;\r\n}<\/code><\/pre>\n
If no tag precedes the selector, it will match any tag (e.g. :only-of-type<\/code>). If another selector precedes it, it will matched based on the type of tag that selector matches. For example .example:only-of-type<\/code> will behave like p:only-of-type<\/code> if .example<\/code> is applied to a paragraph element.<\/p>\n
Simple Example<\/h3>\n
One list contains only a single list item. Another list contains three list items. We can target the list item that is alone with :only-of-type<\/code>.<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
Although perhaps that isn’t the best example, because :only-child<\/code> would work just as well there since list items are the only possible children of lists. If we use divs instead, we could target a paragraph inside a div if it’s the only paragraph, despite other elements being in there as well.<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
To Note<\/h3>\n
As a fun aside, you could achieve the same selection as :only-of-type<\/code> with :first-of-type:last-of-type<\/code> or :nth-of-type(1):nth-last-of-type(1)<\/code>. Those use two chained selectors though, meaning the specificity is double that of :only-of-type<\/code>.<\/p>\n
Related Properties<\/h3>\n