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

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.