html - Weird CSS conundrum

Question

So for some reason the following html code only responds to the notice id and not the flash or <%=key%> classes in my CSS. Why is that? Also, I have some styling which should exist depending on whether I'm showing the flash message or not. However, using the notice id for styling, the CSS always shows up. However, I need the notice id for my ajax rendering of the flash message. How can I solve this problem?

<div class="container">
  <%= render 'layouts/header' %>
  <section class="round">
    <div id= "notice">
      <% flash.each do |key, value| %>
        <div class="flash <%= key %>">
          <%= value %>
        </div>
      <% end %>
    </div>
    <%= yield %>
  </section>
  <%= render 'layouts/footer' %>
  <%= debug(params) if Rails.env.development? %>
</div>

Here's the CSS:

.error, .alert, .notice, .success, #notice, .info {
     padding:0.8em;
     margin-bottom:1em;
     border:2px solid #ddd;
}
#notice {
     background:#e6efc2;
     color:#264409;
     border-color:#c6d880;
}

And here's the relevant html output. Note that it's only the div.

<section class="round">
  <div id= "notice"></div> 
  <!-- yielded content -->
</section>

Answer 1

It′s hard to say without seeing the complete html and css, but if you are setting a style for your notice id like #notice {}, you can′t override it with the css you posted: .error, .alert, .notice, .success, .info {} as an ID has a higher value in the cascade than a class (100 vs 10 if I′m not mistaken).

To override settings from #notice you will need:

#notice .alert {
}
// etc.