Pseudo-classes are one of the strong points of CSS: they allow you to dynamically modify the appearance of the elements of your website.

In other words, you can change the shape of your items and add dynamic effects to your pages even after they are loaded by the browser.

We are not going to learn new CSS properties in this chapter. You already know quite a lot of them by now.

We will rather see how to apply them at specific times or places. For example, we will learn how to change the appearance of a hyperlink when the visitor moves his mouse over it or when it is clicked by the user.

All these elements allow you to add even more dynamism to your website.

This is what pseudo class selectors are for.

What is a pseudo-class

Since we'll be talking about pseudo-classes in this chapter it makes sense to define what these are before going into more concrete examples of how they work.

Pseudo-classes or pseudo-class selectors are keywords added to CSS selectors in order to specify a special state of the selected element.

As a small revision before getting into anything new, here are how CSS selectors work.

selector
{
    property: value;
}

Pseudo-classes allow you to you apply a style to an element in relation to external factors like the history of the navigator, the status of its content or the position of the mouse.

To use a pseudo-class you simply add a colon (:) to the selector, followed by the name of the pseudo-class.

selector:pseudo-class
{
    property: value;
}

You can apply pseudo-classes to any type of selector we discovered in the Setting up CSS chapter: tag names, classes or IDs.

tag:pseudo-class { } /* Tag name selector */

.class:pseudo-class { } /* Class selector */

#id:pseudo-class { } /* ID selector */

You can also select elements within the item affected by the pseudo-class.

div:pseudo-class a { property: value; }

We will go into more detail when we learn about each individual pseudo-class selector.

When hovering

As you may have guessed, the :pseudo-class keyword we used until now in our examples is not an actual pseudo-class selector.

Real pseudo-classes have an actual function.

The first one that we we'll discovered is by far the most common, the :hover pseudo-class.

It's very often used on hyperlinks but can otherwise be applied to any HTML element or CSS selector of your choosing.

The syntax is exactly the same as what we saw in our examples.

a:hover
{
    color: red;
}

The :hover pseudo-class affects any element determined by the selector and adds the condition of a mouse over.

In our example, hyperlinks will be displayed in red when the user moves his pointer over the link (and will revert back to default when the pointer is not longer on the link).

Keep in mind that these attributes will take precedence over any regular CSS style.

Here is an example.

a
{
    text-decoration: none;
    color: blue;
}

a:hover
{
    text-decoration: underline;
    color: red;
}

And the result.

The color of the link changes on a mouse over and an underline is added.

With a little imagination you can add any effect you want with this pseudo-class.

Remember when I said that you could also select elements contained within the item affected by the pseudo-class?

Let's give it a try with :hover, see below for the HTML code.

<ul>

	<li>Do you know about <a href="http://www.siteraw.com">SiteRaw</a>? It's the <strong>best site</strong> on the web.</li>

	<li>Do you also know about <a href="http://www.siteraw.com">SiteRaw</a>? It's the second <strong>best site</strong> on the web.</li>

	<li>And don't forget <a href="http://www.siteraw.com">SiteRaw</a>. It's in the top five <strong>best sites</strong> ever.</li>

</ul>

And the associated CSS.

li:hover strong
{
    color: red;
    font-style: italic;
}

You can see the result in the next figure.

This works just like the first examples, with the exception that the <strong> emphasis is highlighted regardless of where you point your mouse as long as it's on the same horizontal line as the <li> bullet.

The CSS code literally means "whenever the user points his mouse inside a <li> tag, only add the following style to the <strong> element".

I suggest you play around with this pseudo-class and get intuitive with the various ways it can add dynamism to your web pages.

Clicking, selecting and visited

We just learned about the :hover pseudo-class which allows you to dynamically change the style of an element when the user drags his mouse pointer over it.

But CSS allows you to interact even more finely with the different states of your elements.

When clicked

The :active pseudo-format allows you to apply a particular style to an element when it's clicked by the user.

In practice, it's mostly used on hyperlinks.

This effect is only activated when the user clicks on the element so the new appearance won't be visible for very long.

For example, you can change the color of your links (or paragraphs or titles).

a:active { color: red; }

This will turn your links red only when clicked by the user.

When focused

The :focus pseudo-class applies a style when the element is selected.

This is slightly different from :active as it affects any element that has gained focus.

Let's try it out on hyperlinks.

a:focus { color: red; }

The best way to see this effect is to keep pressing Tab until one of the affected links acquires focus.

When visited

You can assign a specific style to a link pointing to a page that has already been viewed by the user.

By default and when no style is defined, the browser automatically colors visited links in purple.

Let's make it red instead.

a:visited { color: red; }

Aside from search engines like Google and Bing, most websites don't use this feature as it gets confusing for the user.

If you don't want visited links to be distinguishable for unvisited ones, you only need to define a style for "standard" links.

As long as you provide a style for "standard" links via the a selector, visited links will automatically inherit the associated properties unless overwritten by the :visited pseudo-class.

More on this below.

When unvisited

If you want your style only to affect unvisited links you can use the :link pseudo-class.

The properties defined will not be inherited by :visited.

a:link { color: red; }
a:visited { color: red; }

The above code is equivalent to the one below.

a { color: red; }

This pseudo-class also has a specificity: it only applies to hyperlinks.

If you remember our chapter on Creating links, we introduced the <a> tag as the anchor element.

It only becomes a hyperlink if a href attribute is specified.

Before and after

The pseudo-formats we are going to see now are very interesting and are a bit different from what we are used to doing in CSS.

Imagine that you have a web page in the form of a Q&A (Questions and Answers).

Our HTML code would look something like this.

<p class="question">What is SiteRaw</p>

<p>The best site on the web.</p>

[...]

<p class="question">Why is SiteRaw so awesome</p>

<p>I don't know.</p>

The number of questions and answers could be anywhere between 10 and 30.

Now suppose that I'm a lazy webmaster (trust me there are many lazy webmasters around) and I want to add the text "Question: ..." before each question, just to make it more readable.

Also, I'm a punctuation noob and I forgot the question marks so we'll have to add those at the end as well.

We could of course manually edit the questions to add what we want directly in the HTML code.

But since we are lazy, let's look at a way we can automate this insertion instead.

CSS pseudo-elements

To do so we are going to use the two following pseudo-elements, ::before and ::after.

They are, for all intents and purposes, exactly the same.

Prior to CSS3 there was in fact no distinction between one and the other.

In short, pseudo-classes act as ways to define the special states of an item whereas pseudo-element create new virtual elements.

You will notice that pseudo-elements are preceded by two colons :: rather than one :. This is a new CSS3 convention to differentiate the two.

Other than that, pseudo-elements work in the exact same way as pseudo-classes.

.question::before { }

.question::after { }

The code above shows how to define the two pseudo-elements we will use.

That's because we're going to use a special CSS property: content.

It is used almost exclusively with the ::before and ::after pseudo-elements and allows you to generate content in the virtual elements, either as text or via a resource.

Here is an example of how it can be used.

.question::before { content: "Question: "; }

.question::after { content: "?"; }

This property will insert content into the HTML page without it being in the DOM (Document Object Model).

It's quite different from what we've seen until now and is somewhat of an exception in CSS.

You're not limited to using only content with the ::before and ::after pseudo-elements either.

Let's go back to our example.

.question
{
    color: blue;
    font-style: italic;
}

.question::before
{
    content: "Question: ";
    font-weight: bold;
    text-decoration: underline;
}

.question::after { content: "?"; }

The result is shown below.

It's also possible to add an image instead of text with the ::before and ::after pseudo-elements.

We still use the content property but this time to indicate the path to the image with the url function.

.question::before { content: url("question.png"); }

Let's try it out.

Keep in my these are just examples, and you can use both pseudo-classes and pseudo-elements to decorate your site in the way you want.