The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

38 Chapter 4

Figure 4-4: Applying the :first-child and :last-child selectors

Now let’s see the difference when we use the :first-of-type and

:last-of-type selectors:

:first-of-type { text-decoration: underline; }

:last-of-type { font-style: italic; }

Take a look at the result in Figure 4-5. You’ll notice that three elements—

h2, h3, and the first p—are underlined. This is because they are the first

instance of that element type. Likewise, the h2, h3, and last p are all itali-

cized. Again, this is because they are all the last element of that type; the h2

and h3 are both the first and last of their type, and so both rules are applied

to them.

Figure 4-5: Applying the :first-of-type and :last-of-type selectors

As with all of the *-type and *-child pseudo-classes, the distinction is

subtle, and sometimes the last child element is also the last of its type, so

the selectors are interchangeable. But as I’ve just shown, at times, they have

different applications.