CODEWITHSUNDEEP
csscss-selectors
Marek
Marek

Reputation: 372

Override css style from child selector

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

Upvotes: 1

Views: 115

Answers (3)

Lemon Kazi
Lemon Kazi

Reputation: 3311

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>

Upvotes: 2

Akshay
Akshay

Reputation: 14378

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>

Upvotes: 0

sjm
sjm

Reputation: 5468

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

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

Upvotes: 1

Related Questions