3 Examples of Pseudo-Classes for CSS Beginners

This post is geared towards beginners with CSS. The goal of this short article is to introduce CSS pseudo-class selectors by giving 3 demonstrations of how a few different ones could be implemented.

There are many pseudo-class selectors, check the docs out here which lists them all. This post will cover a few which I find to be useful and easy to implement for beginners, and also help to give your app a slightly better UX/UI.

Here are the quick 3 topics I’ll be covering:

1. :hover
2. :active
3. :first-child , :last-child , :nth-child()

Pseudo-classes get used like so in our external CSS file:

selector:pseudo-class {
  ...
}

:hover

This pseudo-class is used when you want something to change while the user is hovering the mouse over a specific element. This lets the user know that their mouse is in fact in the correct spot before they click.

We can apply whatever styling changes we want, including animations. However, for this demonstration, I’ll create a custom button that changes background-color, text color, and makes the width slightly larger; I’ll be using a <div> to avoid the default behavior of buttons. This will add an effect that looks a lot more creative than a bland default <button>.

Play with the CodePen to see the difference!

That is how to create a simple effect when a user hovers over an element, however, when we click on the custom “button”, nothing changes or happens, there is no feedback to tell the user that the button was clicked; that’s where :active comes in handy to further customize this button.

:active

This pseudo-class is used when an element is actively being used. For our custom button, this is the moment it is being clicked.

I will be changing the button from above to give a response when activated. That response will be making the background-color even darker, and the width slightly smaller to create a simple “press” effect.

Check it out:

:first-child :nth-child and :last-child

I decided to group these together because they are very similar in how they work. As I’m sure you can assume, the :first-child allows us to change the first child element of the type selected, and :last-child allows us to change the last element of that type.

The :nth-child() grants us the ability to select specific numbered elements in a few different ways. If we put a number in between the parentheses, we are selecting a single element.

p:nth-child(4) {
  ...
}

This would allow changes to be made to the 4th <p> element found in a grouping. We could also use a number with an “n” attached to represent we want to affect every “nth” element in a grouping.

li:nth-child(3n) {
 ...
}

This would allow changes for every 3rd <li> in a grouping. Lastly, we could put some keywords in between the parentheses, odd or even; which do what they sound like, affect all odd or even numbered elements in a group.

Here is a CodePen that demonstrates :first-child and :nth-child() for a top ten leaderboard. I used these pseudo-classes to accentuate the even numbered places by changing their background-color, and also making the first place element larger and gold colored text.

Conclusion

These are just a few of the useful pseudo-classes available in CSS! I find that there are endless ways to use them, and it’s an easy way to add a little pizzazz to the styling of your app. I hope this has been beneficial to at least one CSS beginner out there! Thanks for reading, and as always, happy hacking!