2015-08-02-css-pseudo-classes.md

layout	post
title	CSS <strong>pseudo-classes</strong>
subtitle	Enhancing the CSS <strong>selectors</strong>
section	css

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:

{% highlight css %} .selector:pseudo-class{ } {% endhighlight %}

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.

{% highlight css %} a{ color: blue;} a:hover{ color: red;} {% endhighlight %}

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.

{% highlight css %} a{ color: dodgerblue;} a:visited{ color: rebeccapurple;} {% endhighlight %}

{% highlight html %} Google Twitter Facebook Mozilla MarkSheet {% endhighlight %}

Google Twitter Facebook Mozilla MarkSheet

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.

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

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

: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.

{% highlight html %}

• One
• Two
• Three
• Four

{% endhighlight %}

{% highlight css %} li:first-child{ background: greenyellow;} li:last-child{ background: lightsalmon;} {% endhighlight %}

• 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):

{% highlight css %} li:nth-child(2){ background: violet;} {% endhighlight %}

• 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

{% highlight css %} li:nth-child(odd){ background: gold;} {% endhighlight %}

• 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?

{% highlight css %} li:nth-child(3n){ background: hotpink;} {% endhighlight %}

• 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. {: .info}

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?

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

• 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.

<style type="text/css"> #result-821 a{ color: blue;} #result-821 a:hover{ color: red;} #result-8211 a{ color: dodgerblue;} #result-8211 a:visited{ color: rebeccapurple;} #result-822{ padding: 1rem;} #result-822 input{ border: 2px solid lightgrey; padding: 5px;} #result-822 input:focus{ background: lightyellow; border-color: blue; outline: none;} #result-823 li:first-child{ background: greenyellow;} #result-823 li:last-child{ background: lightsalmon;} #result-824 li:first-child{ background: greenyellow;} #result-824 li:last-child{ background: lightsalmon;} #result-825 li:nth-child(2){ background: violet;} #result-826 li:nth-child(odd){ background: gold;} #result-827 li:nth-child(3n){ background: hotpink;} #result-828 li:nth-child(3n+1){ background: limegreen;} </style>