8.2 CSS pseudo-classes

Enhancing the CSS selectors

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;}

Hover this link and see how it turns 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="http://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;}
  • One
  • Two
  • Three
  • Four

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:

  • One
  • Two
  • Three
  • Four
  • Five

: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;}
  • One
  • Two
  • Three
  • Four

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;}
  • One
  • Two
  • Three
  • Four

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;}
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven

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;}
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven

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.

Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!

Close