A Look Into: CSS3 :First-Of-Type Structural Selector

One thing that I love about CSS3 is is the new addition of selectors that allow us to target elements specifically without relying on the class, id or other element attribute, and one that we will cover here is the following selector, :first-of-type.

The :first-of-type selector will target the first child of the specified element, for example, the snippet below will target the first h2 on the web page.

h2:first-of-type {
	/* style declaration */
}

The :first-of-type is also equal to :nth-of-type(1), so rather than selecting only the first of the type, we can further select the second, the third and so on. The following snippet will target the second h2 element on the web page.

h2:nth-of-type(2) {
	/* style declaration */
}

:first-of-type” vs. “:first-child”

It may seem like these two selectors are doing the same thing, but that’s not the case. Let’s see the following demonstration:

Let’s say we have five paragraph elements wrapped within a div, like this:

<div>
	<p>Pragraph 1</p>
	<p>Pragraph 2</p>
	<p>Pragraph 3</p>
	<p>Pragraph 4</p>
	<p>Pragraph 5</p>
</div>

Now, we would like to select the first paragraph using the :first-child selector.

p:first-child {
	padding: 5px 10px;
	border-radius: 2px;
	background: #8960a7;
	color: #fff;
	border: 1px solid #5b456a;
}

And as we’ve anticipated, the first paragraph is successfully selected.

However, when we add a different element before the first paragraph, let’s say an h1, like the snippet below:

<div>
	<h1>Heading 1</h1>
	<p>Pragraph 1</p>
	<p>Pragraph 2</p>
	<p>Pragraph 3</p>
	<p>Pragraph 4</p>
	<p>Pragraph 5</p>
</div>

the first paragraph will not be selected, as the first child inside the div is no longer a paragraph, but is now an h1.

So, this is the situation where the :first-of-type selector comes to solve the problem.

p:first-of-type {
	padding: 5px 10px;
	border-radius: 2px;
	background: #a8b700;
	color: #fff;
	border: 1px solid #597500;
}

The “Last” Selector

Where there is the “first”, then there will also be the “last”.

The reverse of the two selectors we have discussed above are the following two selectors; the :last-child and the :last-of-type. They basically are the same as the above two, except they do target the last child of the specified element.

For example, this snippet below will target the last paragraph inside the div.

p:last-child {
	padding: 5px 10px;
	border-radius: 2px;
	background: #8960a7;
	color: #fff;
	border: 1px solid #5b456a;
}

And this snippet will also target the last paragraph in the same situation as we have discussed above; this time the <p> is followed directly by a different element.

p:last-of-type {
	padding: 5px 10px;
	border-radius: 2px;
	background: #a8b700;
	color: #fff;
	border: 1px solid #597500;
}

The Selectivizr

Like any other new feature in CSS3, these selectors are not supported in old browsers, mainly Internet Explorer 6 to 8, with an exception for the :first-child selector, as it has been added since CSS2.1. Its relative the :last-child was only added in CSS3.

So, if all these selectors we’ve mentioned here are really required for your webite, you can use a JavaScript Library called Selectivizr to emulate those CSS3 selector’s functionality.

The Selectivizr is dependent on other JavaScript Libraries in order to work, such as the jQuery, Dojo, Prototype and MooTools; and seeing from the comparison table in the official website, MooTools seems to be able to handle all the selectors.

So, let’s include it along with the Selectivizr, as follows:

<!--[if lte IE 8]>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

The conditional comment above will ensure that these libraries will only be loaded in Internet Explorer 8 and below.

Finally, you can view the demo from the following links and it should now work both in modern and old browsers (IE8 and below). You can also download the source file for further examination. Enjoy.