changing text color of an anchor element inside a nav element

Question

  <nav>
    <a href="#">HOME</a>
    <a href="#">SPEAKERS</a>
    <a href="#">SCHEDULE</a>
    <a href="#">VENUE</a>
    <a href="#">REGISTER</a>
  </nav>

when i target the 'nav' element in CSS, I am able to change properties such as the font-size/font-weight/letter-spacing of the content of the 'a' element. However, I cannot change the text color. In order to do so, I have to target 'nav a'.

Why am I able to target some typographical properties when specifying just 'nav' but not others?

Answer 1

href's or hyperlinks have custom browser styles including text color. Hence, is why you have to specify a specific color to override the default.

nav a {
  text-decoration: none;
  color: inherit;
}

<nav>
  <a href="#">HOME</a>
  <a href="#">SPEAKERS</a>
  <a href="#">SCHEDULE</a>
  <a href="#">VENUE</a>
  <a href="#">REGISTER</a>
</nav>

Answer 2

Because has a default font color, it does not inherit the parent element's font color.

Answer 3

The child tag does not inherit the style of a parent, when it has its own style.

a tag has a default style:

a: -webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

Therefore, you should use more specific the selector