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.

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.

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;
}
        

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;
}
        

Browser Compatibility