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. LVHA is a safe conventional source order when equal-specificity link-state rules set overlapping properties. :link and :visited are mutually exclusive, so their relative order usually does not matter; placing :hover after them, and :active after :hover, lets those interaction states override earlier declarations through the cascade when required.

Browsers add their own default styles to links, and user styles can alter them. The colours above are common conventions rather than guaranteed values. Web designers often override them 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, light 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. LVHA is a safe conventional order when equal-specificity rules set the same properties: later matching rules win through source order in the cascade. :link and :visited cannot apply together, while :hover should come after them, and :active after :hover, when you want those interaction states to override earlier declarations:

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.