A Look Into: CSS3 :first-of-type Structural Selector

One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without needing to use the class, id, or other attributes. In this discussion, we’ll delve into the :first-of-type selector.

This particular :first-of-type selector focuses on identifying the first child element within a specific parent, offering a simple example: the code below aims at the first h2 tag present on a webpage.

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

It’s worth noting that :first-of-type essentially performs the same function as :nth-of-type(1). This flexibility allows for targeting not just the first element of its kind but also the second, third, and so on, as demonstrated in the snippet below, which targets the webpage’s second h2 element.

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

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

Although it might seem that the :first-of-type and :first-child selectors do the same job, there’s a distinct difference between them. Let’s explore this with an example:

Imagine we have a set of five paragraph elements contained within a div element, like so:

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

If we aim to style the first paragraph using the :first-child selector, our code would look something like this:

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

This method will, as expected, select the first paragraph successfully.

First paragraph selected

However, introducing a different element, such as an h1, before the first paragraph changes the situation entirely:

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

In this case, the first paragraph is not selected because the first child of the div is now an h1, not a paragraph.

First paragraph not selected

This is where the :first-of-type selector shines, effectively solving the problem by selecting the first paragraph regardless of the preceding elements.

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

The last Selector

Just as there is a selector for the first, there is naturally a counterpart for the last. The :last-child and :last-of-type selectors serve as the reverse of the previously discussed :first-child and :first-of-type selectors. Their purpose is to target the last child within a given element.

For instance, the following code snippet is designed to style the last paragraph within a div element:

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

Similarly, this next snippet will also aim at the last paragraph, even when it is followed immediately by a different type of element, showcasing the versatility and precision of the :last-of-type selector in various scenarios.

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

The Selectivizr

As with many new features in CSS3, these advanced selectors are not supported by older browsers, specifically Internet Explorer versions 6 through 8, with the notable exception of the :first-child selector, which has been part of the standard since CSS2.1, as detailed here. Its counterpart, the :last-child selector, was only introduced with CSS3.

Selectors not supported in IE8

If your website requires the functionality of these CSS3 selectors, you can employ a JavaScript library named Selectivizr to mimic these selectors in older browsers.

Selectivizr relies on other JavaScript libraries to function, including jQuery, Dojo, Prototype, and MooTools. According to the comparison table on its official website, MooTools appears to support all the selectors comprehensively.

To integrate it alongside Selectivizr, add the following to your site:

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

The conditional comment ensures that these scripts load only in Internet Explorer 8 and earlier versions.

With this setup, your site’s features should function smoothly across both modern and outdated browsers, including IE8 and below. For a practical demonstration, follow the links provided to view examples or download the source files for closer inspection. Enjoy the benefits of CSS3 selectors on any browser.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail