Users constantly poke and prod at websites, and as designers, we should strive to make sure our sites respond appropriately.

Pseudo-classes are a type of selector that can help us accomplish this task. These selectors allow us to alter page elements based on context. The example below contains a common pseudo-class that you likely interact with daily.

While the state of interaction will change, the syntax is always the same:

selector + :pseudoclass + { property: value; }

While a pseudo-class could be applied to most CSS selectors, there are three common areas that you will see them appear with the greatest frequency:

• Links
• Order/Page Structure
• Forms

While the examples below should allow you a chance to see how each group works, this is meant to be an overview — not an exhaustive dive. See the links listed at the end for further reading into this topic.

If you have ever clicked on a navbar or a button, you’ve likely interacted with one or more link-related pseudo-classes.

Links receive a lot of attention in web development because users spend a lot of time using them. As links are over-indexed on use, they carry the bulk of responsibility for providing feedback to the user.

There are four link-specific pseudo-classes to remember — and the order of usage here matters (see LVHA).

:class	Purpose
:link	This targets all selected tags that contain href attribute. This pseudo-class is overridden by all other link-specific pseudo-classes when those other behaviors become active.
:visited	In use when the user has visited a link. Helpful for wayfinding.
:hover	Easily the most commonly used pseudo-class. In use when the user mouses over a selected element. Troubled usage on mobile, but there are workarounds.
:active	Alters the appearance of the element while being selected.

Interact with the links shown in the example below to glimpse how link-related pseudo-classes are often used together.

Order

The underlying structure of a web page is governed by the Document Object Model (DOM). This provides the site with a consistent organization that can be leveraged to assist with handling dynamic information.

The parent-child aspect of web development plays a big role here as many of the pseudo-classes are specifically used to target elements nested within other elements.

Aside from :root, which targets the base of your DOM structure (think the HTML tag itself), the other pseudo-classes are contextual and dependant on the elements present on the page. As new elements are created when dynamic data is added to the page, these pseudo-classes take on the additional burden of styling these new elements automatically.

:class	Purpose
:first-child	Targets the first element nested within a parent element.
:last-child	Targets the last element nested within a parent element.
:nth-child()	This selector can take keyword arguments like even/odd, or you can supply formulas for it to calculate; either way, it’s powerful. Study the examples below or and read more about them here and test your usage here.
:nth-last-child()	Works similar to :nth-child(), but instead of working down the selected element, it works from the bottom up.

The example above displays how order-related pseudo-classes can be used together to modify the display of an unordered list. Interestingly, the example handles :hover, allowing some of the styles to render fully, but others are blocked by :nth-child(). As a test, move :hover below the other pseudo-classes to see if order alters the way the example performs.

The order-related pseudo-classes displayed so far target a group of elements without regard the type of elements present. The next group can target specific types of elements that all exist at the same level.

:class	Purpose
:first-of-type	Targets first element of a defined type. Useful when multiple elements exist at the same level.
:last-of-type	Similar to :first-of-type, but targets the last element of a specific type.
:nth-of-type()	Similar to :nth-child as it accepts keywords and formulas, but targets defined elements.
:nth-last-of-type()	Similar to :nth-of-type() but operates in reverse.

It can be challenging to recall how keywords and formulas can be applied to nth pseudo-classes. In the example above, (n+2) skipped the first img tag and applied the property declared to all other images present. To see how easy it is to use keywords, replace the current formula with the keywords even and odd (but not simultaneously).

Exercise

Length: One-to-two hours to complete.

When effectively used, pseudo-classes provide feedback to users while altering our designs with less code overall.

Using this Codepen exercise, your goal is to display your ability to leverage pseudo classes to replicate this design. At a bare minimum, your solution should include the following pseudo classes:

• :hover
• :active
• :nth-child() or :nth-of-type()

Be sure to fork the Codepen exercise and rename it before beginning your work.

///

Once complete, update your Program Journal with a link to this exercise’s final output. Post your Journal in the #Feedback-Loop channel for review.

///

Up next CSS Typography