CSS Pseudo Classes

CSS Pseudo classes are special keywords that allow you to specify HTML elements that are under a special state. Commonly known ones are the :hover pseudo class which targets elements which are under your cursor and the :visited pseudo class which targets previously visited links.

Syntax would go something like this.

selector:pseudo-class {
    background-color: blue;
}

Or an example with the:hover pseudo class would look like this.

.item:hover {
    background-color: blue;
}

Below, I have a widget that lets you play around with a few of the pseudo classes that we can use. I'll also break down what each of those pseudo classes do in a list.

:first-child
Selects the first element among a group of sibling elements.

:last-child
Selects the last element among a group of sibling elements.

:empty
Selects elements that do not have any content within them. This means text and other HTML elements.

:first-of-type
Selects the first element of its type (HTML tag) among a group of sibling elements.

:last-of-type
Selects the last element of its type (HTML tag) among a group of sibling elements.

:hover
Selects any element when a user hovers over it with a cursor or mouse.

:only-of-type
Selects elements that have no siblings of the same type (HTML tag).

:only-child
Selects elements that have no siblings.

Pseudo Class

.item:first-child { background-color: blue; }

Nth Pseudo Classes

These pseudo classes are very special because they allow us to target elements in intervals like every ‘2 elements’ or ‘every 5 elements of this type’.
There are currently 4 of these pseudo classes which are documented in a list below. I also have another widget which you can play around with below.

:nth-child()
Selects elements based on their position in a group of siblings.

:nth-last-child()
Selects elements based on their position in a group of siblings counting from the end. This is basically the opposite of :nth-child().

:nth-of-type()
Selects elements of a certain type (HTML element) based on their position in a group of siblings.

:nth-last-of-type()
Selects elements of a certain type (HTML element) based on their position in a group of siblings counting from the end. This is basically the opposite of :nth-of-type().

Functional Notation

This widget below uses functional notation. This matches the pattern of (An + B). You can think of it like a math function. If you have something like :nth-child(3n + 2), you can substitute n for a number like 1 or 2 to get numbers that will be selected. :nth-child(3n + 2) would select the 2nd, 5th and 8th elements.

Pseudo Class

.item:nth-child(2n + 0) { background-color: blue; }

You can choose another alternative syntax which just adds a single number like :nth-child(5). This will not select the 5th element in a sequence but instead will select only the 5th element.

Pseudo Class

.item:nth-child(2) { background-color: blue; }

Conclusion

Pseudo Classes allow us to apply CSS to elements under more specific conditions like hovering or the number of sibling elements.

Pseudo classes can be fairly confusing to get started with, but I hope the widgets in this playground makes it easier. In this playground, I only covered about 1/3 of all the CSS Pseudo classes. Another 1/3 of them are fairly hard to show and the last 1/3 are all about form controls. Perhaps later I’ll do another playground on the CSS pseudo classes for form controls.

Like always, I recommend the Mozilla Developer Network for resources like Pseudo Classes. Like this playground or leave a comment to let me know your thoughts.

HTML
CSS
Output