8.2 CSS pseudo-classes

We’ve seen how there are mainly 3 types of CSS selectors:

• generic where p in CSS targets <p> HTML elements
• classes where .intro in CSS targets HTML elements with a class="intro" attribute
• ids where #logo in CSS targets HTML elements with a id="logo" attribute

All of these selectors can have pseudo-classes attached to them. A pseudo-class:

• defines a particular state of the element
• is a keyword that starts with a colon :

Syntax

A pseudo-class can’t exist on its own. It must be attached to a selector. The pseudo-class will only define a particular state of that selector.

The syntax looks like this:

.selector:pseudo-class{ }

There is no space between the selector and the pseudo-class, to signify that they are linked together.

:hover

For example, a common pseudo-class used is :hover, which will apply a CSS style when the targeted element is hovered. Let’s test it on links.

a{ color: blue;}
a:hover{ color: red;}

The first line defines how all <a> HTML elements should look like (blue). The second line defines how <a> should look like when hovered (red).

The second line targets the same HTML elements but only when something specific happens (in this case, being hovered).

:visited

This pseudo-class targets links that have been visited. By default, links are blue and turn purple when you’ve visited them. Google results work like that.

a{ color: dodgerblue;}
a:visited{ color: rebeccapurple;}

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.mozilla.org">Mozilla</a>
<a href="https://marksheet.io/visited.html">MarkSheet</a>

Applying a different for visited links is often overlooked but comes in handy for users browsing a list of results. It easily helps them visualize where they have already been.

:focus

This pseudo-class happens when an HTML element is in focus. This is particularly useful for HTML inputs.

.form-input{ border: 2px solid grey; padding: 5px;}
.form-input:focus{ background: lightyellow; border-color: blue; outline: none;}

The outline: none; rule removes the glow from the input.

:first-child and :last-child

These pseudo-classes are related to the HTML hierarchy. They target HTML elements depending on the order in which they appear in the code.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

li:first-child{ background: greenyellow;}
li:last-child{ background: lightsalmon;}

As you can see, no CSS class is applied to the first and last <li>. Their position in the hierachy defines whether the CSS rule is applied.

If we were to add a 5th list item, and using the same CSS, the styling would automatically change:

:nth-child

This pseudo-class is a more global version of :first-child and :last-child. With :nth-child, you can calculate which child element you want to target.

For example, if you want to target the second child, you would use :nth-child(2):

li:nth-child(2){ background: violet;}

odd and even

While using a number is straightforward, the :nth-child comes with 2 keywords:

• :nth-child(odd) will target every odd element
• :nth-child(even) will target every even element

li:nth-child(odd){ background: gold;}

The n iterator

The most powerful aspect of :nth-child is how it can target elements based upon calculations by using the n keyword.

The n value increments from zero 0 to the number of child elements present.

What if you want to target every third element?

li:nth-child(3n){ background: hotpink;}

In our case, n starts at zero and ends at six.

Computers start counting at zero. And because there are seven elements in our list, we will go up until six, because 0-1-2-3-4-5-6 represents seven items.

You can read :nth-child(3n) as “Target each element whose position is dividable by 3”. In our case, it targeted both the 3rd and 6th list items:

• 3 times 0 is zero
• 3 times 1 is the 3rd element
• 3 times 2 is the 6th element

n + 1

What if you want to target the 1st item and every third item after that?

li:nth-child(3n+1){ background: limegreen;}

The 3n+1 has two parts:

• 3n selects every 3rd item
• +1 offsets the start by 1

This is how the calculations were processed:

• 3 times 0 plus 1 is 1
• 3 times 1 plus 1 is 4
• 3 times 2 plus 1 is 7

The n iterator is very versatile. It’s hard to find the right calculation, so just test it out to find the right selection.

Other pseudo-classes

There are dozens of pseudo-classes available, some of them for very specific states. The most used ones are the ones we’ve covered.