CSS: Navigation and Pseudo-classes

CSS: Navigation and Pseudo-classes

What is a pseudo-class?

A pseudo-class is a special type of CSS selector that targets an element based on its current state — not just what it is, but what is happening to it right now. The colon (:) separates the element selector from the pseudo-class name:

a:hover {
  /* applies when mouse is over the link */
}
a:visited {
  /* applies to links the user has already clicked */
}

Pseudo-classes let you style elements differently depending on how users are interacting with them — making interfaces more responsive and easier to use.

The four link pseudo-classes

Links (<a> elements) have four state pseudo-classes. These are often referred to as LVHA — the recommended order to write them in, to avoid conflicts:

Browsers add their own default styles to links. In most cases, web designers override these completely using CSS to match their site's design.

Default browser nav (before CSS)

Without any CSS, a <nav> with a <ul> looks like this:

The links are blue, underlined, and close together — not ideal for navigation.

Styled nav bar (after CSS)

With CSS, the same links can look like this — clean, dark text on a dark background with a highlight on hover:

The CSS that achieves the styled version:

/* Style the nav container */
nav {
  background-color: #042C53;
  padding: 0.5rem;
}

/* Remove bullets if using ul/li for nav links */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

/* Style the links */
nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
}

/* Hover state — visual feedback */
nav a:hover {
  background-color: #185FA5;
}

Styling all four link states

You can write separate rules for each link state. Remember the LVHA order — if you write :hover before :link, the hover effect may not work due to specificity:

a:link    { color: #185FA5; }            /* unvisited — blue */
a:visited { color: #9090b0; }            /* visited — grey */
a:hover   { color: #042C53; background-color: #E6F1FB; }  /* hover */
a:active  { color: #1D9E75; }            /* being clicked */

Why hover effects improve usability

A usability principle states that interactive elements should give feedback when they are interacted with. When a user moves their mouse over a navigation link, a background colour change:

• Makes it clear the element is clickable (users know it is interactive)
• Helps users track which link they are about to click
• Reduces the chance of clicking the wrong link

Without any hover effect, all links look the same before and during hovering, which reduces clarity and usability.