Home/ Questions/Q 7929745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T20:11:26+00:00

I have defined a class in my main.css file. .red { color: #d14; }

  • 0

I have defined a class in my main.css file. 

.red {
  color: #d14;
}

And using it like this.

<div class="navbar">
    <div class="navbar-inner">
       <ul class="nav">
          <li class="active red">
             <a href="/admin/list"><i class="icon-leaf icon-white"></i>Admin</a>
         </li>
       </ul>
    </div>
</div>

Besides my main.css I also import the twitter bootstrap css file.

This way it does not work. Is it because Bootstrap is overruling my color definition?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:

    .navbar .nav .active > a,
.navbar .nav .active > a:hover {
    color:#FFFFFF;
}

    You’ll have to write something even more specific to get the style to apply:

    .navbar .navbar-inner .nav .red a {
  color: #d14;
}

    Demo: http://jsfiddle.net/pYGaG/

    You could use !important on the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an id to it, which carries a lot of weight specificity-wise:

    <li class="active" id="home_link">
   <a href="/admin/list"><i class="icon-leaf icon-white"></i>Admin</a>
</li>

    #home_link a {
  color: #d14;
}

    http://jsfiddle.net/pYGaG/1/

    Here are a couple good articles on CSS specificity:

    And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren’t tied to the way it should look, but what it is (for example, .active-link).

    • 0