5

I am trying to change the font color in my navigation bar. I use bootstrap and my own stylesheets. I want my font to be red, so I'm trying to override every other rule with the help of !important (other things failed as well). But the color stays grey. Those are the computed values on my element from chrome developer tools:

  • color: hsl(0, 0%, 60%);
  • .navbar-inverse .navbar-brand - #999
  • a - #428bca
  • a:-webkit-any-link - -webkit-link
  • nav - red !important
  • body - #333

How is it possible that !important gets overriden by styling with class selector and how to make my font red?

(answer is that !important only overrides styles on the same element you apply it to. It doesn't make the element's descendants inherit from it) - from comments.

Evgenia Karunus
  • 10,715
  • 5
  • 56
  • 70
  • I think it would be helpful if you could add your actual CSS. I'm not entirely sure what those bullets mean in CSS. – jsalonen Jun 07 '14 at 16:01
  • Only Chrome (Webkit/Blink) ? – Protomen Jun 07 '14 at 16:01
  • 1
    @jsalonen, well, this is my css: html{color: red !important;}, everything else comes from bootstrap.css. – Evgenia Karunus Jun 07 '14 at 16:02
  • You don't have to use important normally. – Xatenev Jun 07 '14 at 16:06
  • @Xatenev, I even tried ids. – Evgenia Karunus Jun 07 '14 at 16:07
  • If possible, never use `!important`. Its bad practice usually applied because people do not understand how CSS rules get overriden. – jsalonen Jun 07 '14 at 16:07
  • Please read this: http://stackoverflow.com/questions/12780511/how-does-a-css-rule-override-another-css-rule – jsalonen Jun 07 '14 at 16:08
  • @jsalonen, this was't a question about whether using !important is a good practice, I know it isn't and I tried classes and then ids beforehand. – Evgenia Karunus Jun 07 '14 at 16:13
  • @jsalonen: Neither of the two questions you've linked to are relevant. – BoltClock Jun 07 '14 at 16:44
  • 3
    I could have sworn this was asked a couple of days ago. The answer is that `!important` only overrides styles on the same element you apply it to. It doesn't make the element's descendants inherit from it. – BoltClock Jun 07 '14 at 16:45
  • @BoltClock imho they are relevant: if he had known how CSS srules override each other, he would not even had used `!important` in the first place. Please, if you find that question from yesterday, add a link. – jsalonen Jun 07 '14 at 16:48
  • @jsalonen: Still, calling the first link a duplicate is just plain wrong. These are two completely different questions. – BoltClock Jun 07 '14 at 16:50
  • I called it a possible duplicate. Given the extra information I agree: it is not a duplicate. If you have some other candidate for duplicate please add it. – jsalonen Jun 07 '14 at 16:51

1 Answers1

2

Try this: 

.navbar .navbar-nav>li>a {
    color: red;
}
Gofilord
  • 6,239
  • 4
  • 27
  • 43