Menu
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:
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.
393
There are two ways you can override an ! important tag in CSS. You can add another CSS rule with an ! important tag and use a selector with a higher specificity.
To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.
Any inline stylesheet takes the highest priority. Therefore, it will override any rule defined in <style>... </style> tags or rules defined in an external style sheet file.
You should be able to do this by increasing specificity on your mobile css file and adding an ! important value to this new value in the mobile stylesheet. yeah, increasing specificity will do it, but this should be done if there is no other ways to do it.
Try this:
.navbar .navbar-nav>li>a {
color: red;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
