In this tutorial, you will learn what a pseudo-class is and how you can use them to target different elements on your page.  Using pseudo-classes is a powerful tool in the frontend developer's toolkit to enable cool effects on your webpage, that you may have thought could be achieved using Javascript. 

How Do I Target State On A Page In CSS?

When someone visits your web page and performs certain actions, like hovering the mouse over a link, in the background the web browser dynamically applies different 'state'.  This 'state management' is done by the browser by applying something called a pseudo-state to the element.

How the browser applies state is pretty boring, however, as a frontend developer you can use these different states/pseudo-classes to change the style of your elements depending on the state.  In the example above, when you hover your mouse over a link the browser will apply the 'hover' pseudo-class to that link.  You can then write a CSS selector to target the link in hover state to say apply an underline.

Pseudo-classes should hopefully be fairly simple to grasp.  There are loads of pseudo-classes available that allow you to target a whole host of different actions and states.  If you want a full list of states, WC3 is always a good source of information,

To write a selector that targets a pseudo-class, you first proceed the state with a semi-colon, followed by the name of the pseudo-class then your styles.  

.myclass:hover {



A few common pseudo-classes are :link:visited:hover:active:first-child and :nth-child. There are more, and we’re going to see them all in a minute.

What are CSS Pseudo Elements?

The :first-child Pseudo-class