Override css rules

Question

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

You can add `!imporant` to any rule to override other rules already set. http://jsfiddle.net/60k6mtve/ ... Or you can change your CSS specificity level. — mituw16, Apr 01 '15 at 18:20
In term of [specificity](http://www.w3.org/TR/CSS2/cascade.html#specificity) `ul#navbar li` has a higher value than `.selected` class selector. Instead, use: `ul#navbar li.selected` — Hashem Qolami, Apr 01 '15 at 18:21
@CMadi `!important` [should](http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css) [be](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) [the last](http://james.padolsey.com/css/dont-use-important/) option to choose. — Hashem Qolami, Apr 01 '15 at 18:28

score 1 · Answer 1 · answered Apr 01 '15 at 18:37

1

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;
 }

answered Apr 01 '15 at 18:37

Samir Das

1,878
12
20

score 0 · Answer 2 · answered Apr 01 '15 at 18:22

0

Change .selected to ul#navbar li.selected

answered Apr 01 '15 at 18:22

9Deuce

689
13
27

Override css rules

2 Answers2