11. Pseudo Classes

A pseudo-class is a way to targets an element that is in a particular state. It is most commonly associated with the <a> tag and the different states of a link.

The pseudo-classes associated with the are:

• :link: The link in its native state.
• :visited: The link when it has been visited.
• :hover: The link whilst the cursor hovers over it.
• :active: The link whilst it is been pressed or selected.

Tip

It is popular to use the text-decoration property to remove the underline from links. However, make sure that users are still aware that the text is a link. For example, by grouping your links in navigation lists.

Thus to style up links you could use the following:

a:link{
    text-decoration:none;
    color:#000000;
}
a:visited{
    text-decoration:none;
    color:#CCCCCC;
}
a:hover{
    text-decoration:underline;
    color:#66CC00;
}
a:active{
    text-decoration:underline;
    color:#CC6600;
}

However, the above would restyle all <a> on the page and that may not be the desired effect.   Therefore, you are more likely to create specific rules that add more context. For example, we may only want to style the bulleted list inside the

.

<nav>
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="qualifications.html">Qualifications</a></li>
  <li><a href="skill-set.html">Skill Set</a></li>
  <li><a href="work-experience.html">Work Experience</a></li>
</ul>
</nav>

Add the following contextual rules (with their pseudo-classes) to your styles inside the <style> tag.

nav li a:link{
    text-decoration:none;
    color:#000000;
}
nav li a:visited{
    text-decoration:none;
    color:#CCCCCC;
}
nav li a:hover{
    text-decoration:underline;
    color:#66CC00;
}
nav li a:active{
    text-decoration:underline;
    color:#CC6600;
}

Tip

The <nav> used above is a HTML element that is used to indicate part of the page that contains navigation.

Tip

There are other pseudo-classes such as :first-child and :focus that you could investigate.

CSS Nesting (Advanced Technique)

CSS nesting is a new feature in CSS that allows you to write nested styles in a way that's more natural and readable, similar to how you might structure your HTML.

This technique uses the & selector, the nesting selector.

To use CSS nesting, your code would be rewritten like this:

nav li a {
  &:link {
    text-decoration: none;
    color: #000000;
  }

  &:visited {
    text-decoration: none;
    color: #CCCCCC;
  }

  &:hover {
    text-decoration: underline;
    color: #66CC00;
  }

  &:active {
    text-decoration: underline;
    color: #CC6600;
  }
}

Here, the & symbol represents the current selector (nav li a in this case).

By using the &, you're effectively appending the pseudo-classes (:link, :visited, :hover, :active) to the base selector (nav li a), resulting in the same rules as in the original example.

Warning

This feature isn't fully supported in all browsers yet, but it's useful to know how it works.