CSS tutorial series: CSS pseudo-classes
Tags: beginners, webdev, tutorial, css
Published: 2023-01-19 12:02:54

In a prior tutorial, you have already seen and understood classes and how to use them. [CSS tutorial series: CSS Selectors](https://dev.to/fullstackjo/css-tutorial-series-css-selectors-102). 
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.

![pseudo-classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4qflelvbng7y8gfpprv.png)

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.

![hover state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skld98d6nr3jl7oxezd5.png)

```CSS
 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.|Every element that is the nth child of its parent, of the same type, is matched by the pseudo-class `:nth-of-type`.|
| `: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](https://css-tricks.com/useful-nth-child-recipies/) 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](https://flukeout.github.io/)