CSS tutorial series: CSS pseudo-classes

In a prior tutorial, you have already seen and understood classes and how to use them. CSS tutorial series: CSS Selectors.
In this post we're going to talk about pseudo-classes.

What is a pseudo-class?

A keyword that is added to a selector to specify a special state of the selected element is known as a pseudo-class.
A pseudo-class is defined by a colon : followed by the pseudo-class name.

In this example, we'll use a paragraph and a span to demonstrate how these pseudo-classes work.

I've chosen Purple as the color of the text inside the span, now let's make that span change color when we hover over it by setting its color to red.

 span {
  color: purple;
}

span:hover{
  color: red;
  cursor: pointer;
}

Many different pseudo-classes exist, including first-child, last-child, only child, first-of-type, last-of-type, nth-of-type, nth-child, and only-of-type. However, we should note that there are additional pseudo-classes that we did not mention in this post but will discuss in later posts in this series.

Let's discuss the pseudo-classes that were mentioned earlier.

pseudo-classes	Description
:first-child	the pseudo-class :first-child is used to select the specified selector, only if it is the first child of its parent.
:last-child	All elements that are the last children of their parent are matched by the pseudo-class :last-child
:nth-child(n)	The pseudo-class :nth-child matches each element that is the nth child of its parent. n is a number which is used to specify the number of the child be it even or odd.
:only-child	Every element that is the only child of its parent is matched by the pseudo-class :only-child.
:first-of-type	Every element that is the first child, of a specific type, of its parent is matched by the pseudo-class :first-of-type selector.
last-of-type	Every element that is the last child, of a specific type, of its parent is matched by the pseudo-class ':last-of-type' selector.
:only-of-type	Every element that is the only child of its type, from its parent, is matched by the pseudo-class :only-of-type.

nth-child and nth-of-type

In addition to accepting an odd or even number, both of these pseudo-classes also accept the formula :nth-child(an + b)

Let's explore that further
:nth-child(3) will select the third child of an element.

let's now explain how it works wen using an expression inside the parentheses:

:nth-child(2n+2).

• n always starts at zero
• so 2n is going to be 2 * 0 = 0
• that would leave us with 0 + 2 = 2

so every second element is going to be selected let's calculate further to prove it.

• n is now at 1
• 2n is going to be equal to 2 * 1 = 2
• that would leave us with 2 + 2 = 4 and so on.

Useful :nth-child Recipes is an easy step by step guide to understanding how the n algebraic expression works.

Practicing is important in order to truly understand, here's an interactive game that will help you understand pseudo-class use by completing the small challenges.
CSS diner