csstwitter-bootstrapruby-on-rails-3css-cascade

CSS not cascading

This is part of the usersettings.css.erb with line numbers

11    #userSettingMain .form-horizontal .controls {
12    
13      margin-left: 30px;
14    }
15    
16    #user_birthday_3i{
17    
18      margin-left: 0px;
19    }

however, when I go to the page it renders the first rule and not the last, when I inspect

chrome inspect

the html is a form with .form-horizontal which has a select_date tag for choosing a date for the user birthday. the html that rails generate gives the day number #user_birthday_3i

what did I miss in this?

Solution

  • CSS being cascading isn't about which rules come first, it's about specificity. The #userSettingMain .form-horizontal .controls rule is more specific than the #user_birthday_3i rule, in the manner that it has more selectors (covering more 'depth' in the object tree) thus it overrides it.

    If you really want the second one to override the first, add !important to the end of the margin definition:

    #user_birthday_3i {
    margin-left: 0px !important;
}