Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Pseudo-Classes: :nth-of-type and :only-of-type

Why should we use Pseudo-classes for nth-of-type instead of specific classes or ID's? What is the practical use?

As I'm learning about Pseudo-Classes I'm trying to think of why we would use these instead of using specific ID's or classes? Does it save time? Does it save resources?

If there is an example that might make it more clear for me that would be awesome.

Thank you so much!

2 Answers

Alexander Carlsen
Alexander Carlsen
4,764 Points

A lot of times it's simply easier and more clean to select an elemenent with a pseudo-class than adding an extra id or class to the markup.

For myself I find it very handy to use pseudo-classes when I'm making a grid for example. I can clear the first item in each row simply by using nth-of-type or nth-of-child. This way I don't have to add a lot of classes to my mark-up. Saves both times and doesn't bloat the code.

Thanks Alexander!

Hi Graeme,

CSS pseudo-classes let you style specific states.

For instance, link states:

  • a:link selects any link that your guest hasn’t visited yet, while the mouse isn’t hovering over or clicking it. This style is your regular, unused web link.

  • a:visited is a link that your visitor has clicked before, according to the web browser’s history. You can style this type of link differently than a regular link to tell your visitor, “Hey, you’ve been there already!” (See the box on page 294 for the limitations surrounding this selector.)

  • a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren’t just for fun—they can provide useful visual feedback for buttons on a navigation bar. You can also use the :hover pseudo-class on elements other than links. For example, you can use it to highlight text in a <p> or <div> when your guests mouse over it. In that case, instead of using a:hover (which is for links) to add a hover effect, you can create a style named p:hover to create a specific ef- fect when someone mouses over any paragraph. If you just want to style tags with a specific class of highlight applied to them, then create a style named .highlight:hover.

  • a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone’s pressing the mouse button, before releasing it.

—CSS3 The Missing Manual

You can also style entire divs or paragraph elements using pseudo-classes when a mouse is hovered over them. For more information on pseudo-classes take at look at the MDN.

Hope this helps you better understand how pseudo-classes work. Let us know if you have more questions.

Hey Dustin,

Thank you for taking the time to answer!