CSS3 Pseudo-classes: Harnessing the power!

If you have a passing interest in website development, or work with code everyday, there’s a pretty good chance that you’ve heard of HTML5 and CSS3 by now. There’s lots of discussion around HTML5 and how wonderful it is – and rightfully so. However I’m going to discuss some simple but power CSS3. Because let’s face it, CSS3 is where things get really exciting when developing a website.

This post will go into 4 of the most common (in my opinion) CSS3 pseudo-class selectors and how to use them in the real world. The 4 that I will be discussing are:

• :first-of-type
• :last-of-type
• :nth-of-type
• :nth-last-of-type

However there are lots more pseudo-classes on offer and its always worth getting a bit more familiar with them. I recommend the information on the sitepoint site for further reading:

http://reference.sitepoint.com/css/css3psuedoclasses

:first-of-type

If you can read English, you probably already have a pretty good idea what this CSS3 selector does. Simply, it allows you to pick the first item of a given type, such as the first list item in an unordered list.

Here’s a simple example of how you’d use it:

HTML
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

CSS
ul li:first-of-type {
  font-weight: bold;
}

The code above will create an unordered list of three items. The first item is then displayed in bold using CSS3.

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:last-of-type

Similar to the :first-of-type selector, only this selector will pick the last item of a given type. So if we go back to our unordered list and simply change the CSS from :first-of-type to :last-of-type, we will see that the last item (the third in this case) is now in bold.

HTML
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

CSS
ul li:last-of-type {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:nth-of-type

Using the nth-of-type is when our CSS can get really powerful. There are several ways to use the :nth-of-type selector but I am only going to show you two. If you want to read more on the :nth-of-type, check out what sitepoint has to say:

http://reference.sitepoint.com/css/pseudoclass-nthoftype

:nth-of-type(3)

This is the simpler form of :nth-of-type, simply declaring that we want to target only the third item of a given type. So back to our unordered list and by changing the CSS selector, only the third list item is in bold (no matter how many list items we add).

HTML
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

CSS
ul li:nth-of-type(3) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:nth-of-type(3n)

Even more useful again is when we target every third item of a type using :nth-of-type(3n). We could change this to target every fourth, fifth, sixth, etc. by changing 3 to 4, 5, 6, etc.

If we create an unordered list of 6 items, you can see how :nth-of-type(3n) works:

HTML
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Forth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>

CSS
ul li:nth-of-type(3n) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

Note: If you want to target every second item, use :nth-of-type(even). There is also a :nth-of-type(odd) selector.

:nth-last-of-type

After reading the last few examples, you’ve probably worked out what this selector does and how to use it. Rather than targeting just the last item of a given type, you can target the second or third last item, for example, or even the last two or three items. A really handy selector!

:nth-last-of-type(3)

By using :nth-last-of-type(3), we can target the third last item in our list:

HTML
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Forth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>

CSS
ul li:nth-last-of-type(3) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:nth-last-of-type(-n+3)

And finally, by using :nth-last-of-type(-n+3), we can target the last three items in our unordered list:

HTML
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Forth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>

CSS
ul li:nth-last-of-type(-n+3) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

Older Browsers

If you are knowledgable with CSS3, you probably already realise that there is a small problem with using CSS3 pseudo-classes, and it is that older browsers will not support them!

Don’t let that put you off for fear not, there has already been some very clever people who have realised this problem and have used Javascript to work around it, saving our sanity in the process!

The Javascript that I use on a regular basis is Selectivizr, which you can read more about and download from here:

http://selectivizr.com/

Conclusion

I love the power and simplicity of CSS3 pseudo-classes. It saves us from littering our HTML and CSS with unnecessary classes just to deal with unwanted padding or margin, such as on the last paragraph of a block of text. It enables us to easily create zebra-strips on an index or list page. I find they help me a lot with fine-tuning the spacing in a grid of thumbnails on a gallery page. And they’ll definitely make your life easier when using a CMS (content management system) to stop the site from looking broken long after the initial launch.

As with much HTML5 and CSS3, the possibilities are only limited by your own imagination! And I hope my list of examples of four common pseudo-class selectors has given you some food for thought.

Have you have used CSS3 pseudo-classes in a recent website project? Then why not tell us about it in the comments?