CODEWITHSUNDEEP
htmlcss
user3299707
user3299707

Reputation: 1

Override css rules

html file

 <ul id="navbar">
            <li class="selected">
                <a href="#"> HOME</a> 
            </li>
            <li>
                <a href="#"> ABOUT US</a>
            </li>
  </ul>

css file

  ul#navbar li {
  font-size: 13px;
  padding: 10px;
  display: inline;
  text-decoration: none;
  border: 1px solid #aaaaaa;
  }

and now I want to add bottom border to green color only on active list item.

 .selected {
 border-bottom: 5px solid #37F053;  
 }

but this does not work well. it still has the #aaa bottom border color

Upvotes: 0

Views: 32

Answers (2)

Samir Das
Samir Das

Reputation: 1908

Using !important everywhere is bad practice. It means you don't have control on your style-sheet. Correct rule will be:

ul#navbar li.selected {
   border-bottom: 5px solid #37F053;
 }

Upvotes: 1

9Deuce
9Deuce

Reputation: 676

Change .selected to ul#navbar li.selected

Upvotes: 0

Related Questions