Let’s be honest, CSS sometimes can get a little tricky and confusing to understand. Especially with the onset of CSS3 and all these new CSS3 selectors and pseudo classes, it’s quite possible that many of us might still be trying to catch up with the new selectors. Well, only-of-type is one such new CSS3 pseudo class that can be a little confusing. So let’s dive deep into understanding the only-of-type CSS pseudo class selector.
What is only-of-type CSS selector / Pseudo Class selector?
In simple terms, the purpose of only-of-type pseudo class is to select or filter out that element which is the only one (single one or lonely one) of a ‘certain type’ (<a> , <p>, etc) under its parent element. This means that if there is an anchor, which is the ONLY anchor within its parent element, then you can target it using the only-of-type pseudo class by using a:only-of-type{} . If there are other anchors within the same parent, then none of the anchors would be selected as they would not be the “only one” within their parent element and has siblings of the same type (<a>). However, if there is only one anchor and the other elements are say a paragraph tag, even then the only-of-type selector is applicable on it.
The purpose of only-of-type selector is to target the elements which are the only one of that particular “type” within its parent.
Let’s understand this better with the help of the following code and illustration. Please go through the DOM structure once!
<style>
a:only-of-type{color:red;} /*We want to target all the 'ONLY' anchors under its parent element */
span{border:1px solid orange;display:inline-block;margin-top:10px;}
</style>
<body>
<div class="main-wrapper">
<a href="#">First link in Main wrapper</a>
<ul>
<li><a href="#">Only one inside first <li> tag</a></li>
<li><a href="#">First one in 2nd <li></a><br/>
<a href="#">Second one in 2nd <li></a></li>
</ul>
<a href="#">Second link in Main wrapper</a><br/>
<span>
<a href="#">Only one link in the span tag</a>
<p>Only paragraph in the Span tag</p>
</span>
</div>
<a href="#">Only Anchor in Body outside Main Wrapper</a>
</body>This is how the above code would render on a browser :
The above DOM can be also presented as a tree structure for representation purposes. Let’s take a look at it.
As you can notice, right under the Body there are two elements a DIV with class “main-wrapper” and an Anchor. Please note that this anchor is the ONLY anchor directly under the Body tag. Similarly under the main-wrapper DIV there is a span tag that has an Anchor and a Paragraph under it. Here too you can notice that the Anchor is the ONLY anchor under the span and the other sibling is a paragraph. The same goes with the Anchor which is the ONLY anchor within the first list item. The second list item has two anchors within it and hence do not qualify as an only-of-type element.
The purpose of only-of-type selector is to target the elements which are the only one of that type within its parent. These elements don’t have a sibling of the same type but can contain siblings of any other type. This selector is a very useful one and can easily avoid the usage of JavaScript to target such elements for the purpose of styling or hiding. Well, go ahead and play around with the only-of-type selector and let us know your experiences with it.