Override css style from child selector

Question

how can I override this css rule:

Css:

.menu ul>li>a{
color: black;
}

I need to change color to blue. I tried:

a.selected{
color : blue;
}

.menu ul>li>a {
  color: black;
}
a.selected {
  color: blue;
}

<nav class="menu">
  <ul>
    <li>
      <a class="selected">Test</a>
    </li>
  </ul>
</nav>

But it doesnt work. Thank you in advance

Marek

Answer 1

change a.selected to .menu ul>li>a.selected

  .menu ul>li>a{
color: black;
}
   .menu ul>li>a.selected{
color: blue;
  }

 <nav class="menu">
    <ul >
        <li>
            <a class="selected">Test</a>
        </li>
    </ul>
</nav>

Answer 2

.menu ul>li>a.selected{
  color: blue;
}

You could also use !important to override but its generally regarded as bad practise

Answer 3

use !important it overrides it with the value you have given You can know more about !important here What are the implications of using "!important" in CSS?

.menu ul>li>a{
color: black;
}


a.selected{
color : blue !important;
}

<nav class="menu">
    <ul >
        <li>
            <a class="selected">Test</a>
        </li>
    </ul>
</nav>