Active class in CSS

Question

For some reason the active class doesn't have any effect on my page. Would be very grateful for someone to take a peek and explain why it doesn't.

.nav-item {
  display: inline;
  list-style: none;
  margin-left: 40px;
}

.nav-item a {
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.nav-item a:hover,
.active {
  color: #f3ef36;
}

<header id="header">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a class="active" href="#">Hem</a></li>
      <li class="nav-item"><a href="meny.html">Meny</a></li>
      <li class="nav-item"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

From the examples I've checked on w3schools and others it should work fine, but for some reason the active class doesn't seem to bite in this context. The hover pseudoclass works but not the active class I've manually typed in the different list elements.

Answer 1

Please read on CSS specificity.

Rules on selector .nav-item a will always have precedence over .active.

You need to increase the specificity e.g. like this a.active

See the snippet below:

header {background:#000}

.nav-item {
  display: inline;
  list-style: none;
  margin-left: 40px;
}

.nav-item a {
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.nav-item a:hover,
a.active {
  color: #f3ef36;
}

<header id="header">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a class="active" href="#">Hem</a></li>
      <li class="nav-item"><a href="meny.html">Meny</a></li>
      <li class="nav-item"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

Answer 2

.nav-item {
  display: inline;
  list-style: none;
  margin-left: 40px;
}

.nav-item a {
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.nav-item a:hover,
.active {
  color: #f3ef36;
}

<header id="header">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a class="active" href="#">Hem</a></li>
      <li class="nav-item"><a href="meny.html">Meny</a></li>
      <li class="nav-item"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>