Nav, chips & :visited

Hover highlights plus links that change after you open them

Northline

Basics Nav Cards Lists

Filter chips (:hover grows type)

Day hikes

Camping

Gear

Guides

Hover a chip: fill flips to teal and font-size / padding increase via .chip:hover.

:visited links

Open example.com (then come back) Open Wikipedia (then come back) Open Cards page in this lab

After you visit a link, a:visited can change its color (often purple here). Browsers limit visited styles for privacy — color is the reliable one (rule 46).

What to notice

Top lab nav and dark app nav both use :hover
Visited links keep a different color so users see where they have been
Unvisited links stay teal until opened

Rules 43 and 46. Tip: keep hover feedback subtle so the layout does not jump.

Important HTML

Nav links are the interactive targets.

<nav class="app-nav">
  <div class="links"><a href="#">Home</a></div>
</nav>

Important CSS

Nav link states clarify the current target.

.app-nav .links a:hover {
  background: #e2e8f0;
  color: #0f172a;
}