LESSON 6.4

CSS Pseudo Classes for Navigation

Make your navigation respond to hover and click

Learn how to use the four link pseudo-classes to style your navigation based on whether a link is unvisited, visited, hovered, or being clicked.

💡 The Concept

CSS link pseudo-classes let you style anchor tags differently depending on whether they have been visited, are being hovered, or are currently active. A pseudo-class styles an element based on its current state. For navigation links, there are four states you need to know:

The four pseudo-class states for navigation links
The four pseudo-class states: link, visited, hover, and active.
  • :link: the default state of an unvisited link
  • :visited: a link the user has already clicked
  • :hover: triggered when the user moves their mouse over the link
  • :active: triggered while the user is in the middle of clicking

The Order Matters

These four pseudo-classes must be written in this exact order in your CSS, or they will not work correctly. The memory trick is LoVe HAte: Link, Visited, Hover, Active.

  1. :link
  2. :visited
  3. :hover
  4. :active

When to Use the :visited Color

Whether to show a different :visited color depends on context. In body text and search results, it is genuinely helpful. When you search on Google, visited links turn purple so you know which results you have already opened — that prevents you from clicking the same page twice. The same principle applies to article pages with lots of outbound links.

For a navigation bar, though, the behavior is distracting. Visitors do not need to be reminded which pages they have been to every time they glance at the nav. For that reason, the exercise in this lesson sets :link and :visited to the same color in navigation, while still including both rules so you have full control.

🎬 Video Demonstration

This video covers styling a navigation bar with CSS pseudo-classes.

Exercise: Try It Yourself

Step 1. Open your JSFiddle from the previous lesson.

Step 2. Add the four pseudo-class rules to your nav links in the correct LoVe HAte order.

Step 3. Choose different colors for :hover and :active so you can see the difference.

Step 4. Run and hover over the menu items to confirm the color change works.

Note: there should be no space between the element and the colon. Write a:link, not a :link.

JSFiddle showing complete navigation code with pseudo-class styles
The finished navigation with pseudo-class styling applied.

For a navigation menu, set :link and :visited to the same colors. Visitors should not be distracted by visited-link colors in a nav bar. Save that differentiation for body text links, where knowing what you have already read is actually useful.

💡 If you are making a website template: Add pseudo-class rules (link, visited, hover, and active) to the navigation links in your website template. See the full website template guide for reference.

❓ Frequently Asked Questions

Why does the order of pseudo-classes matter?

CSS applies rules from top to bottom, and when two rules have the same specificity, the later one wins. If you put :hover before :visited, then hovering over a visited link shows the visited color because :visited appears later and overrides :hover. The LoVe HAte order (Link, Visited, Hover, Active) ensures that each state takes priority at the right moment. Active is last because it is the most immediate interaction and should always win.

Why set :link and :visited to the same color in navigation?

In body text, the visited color helps readers track what they have already read — that is genuinely useful. In a navigation bar, the same effect is distracting. Visitors do not need to be reminded which pages they have been to every time they look at the nav. Setting :link and :visited to the same color keeps the navigation looking clean and consistent on every visit.

Can I use pseudo-classes on elements other than links?

Yes. :hover works on any element — you can highlight a table row, change a button’s background, or reveal hidden content when a user hovers over a div. :focus is another useful pseudo-class that applies when an element is selected by keyboard (important for accessibility). :link and :visited are specific to anchor tags, but the others work broadly. You will see more pseudo-classes in later lessons on forms and tables.

What is the difference between :hover and :active?

:hover applies as soon as the mouse moves over an element and stays active until the mouse leaves. :active applies only during the instant the mouse button is held down — it is the “being clicked right now” state. In practice, :active flashes so quickly that users rarely notice it unless you make the color change dramatic. It is still worth including because it provides a small but satisfying visual confirmation that a click registered, and it also applies when keyboard users press Enter on a focused link.

★ Key Takeaways

Pseudo-classes let you style elements based on what a user is doing. This lesson showed you how to use :hover, :active, and :visited to make your navigation respond to user interaction. Next, you will learn about the display property. It controls whether elements stack, sit side by side, or disappear entirely from the layout.

Next Lesson: Professional Navigation Design

← Back to Links and Navigation Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons