CSS has no effect on dynamic classes

Question

$('fieldset.one label, fieldset.two label').each(function () {
    var className = $(this).text().trim().toLowerCase();
    $(this).addClass('default ' + className);
});

I'm adding classes dynamically to label elements, but when I try to style them, there is no effect. One of them has .sedan class added automatically, I see it in firebug, but the following doesn't have any effect:

.sedan {
  display:none !important;
}

HTML:

<fieldset class="one">
  <label>sedan</label>
  <label>suv</label>
  <label>truck</label>
</fieldset>

<fieldset class="two">
  <label>sedan</label>
  <label>suv</label>
  <label>truck</label>
</fieldset>

Answer 1

There's nothing wrong with the code you've posted here. I just tested it locally and it works just fine. Make sure your selectors are correct - and you can check to see whether the styles are being added with firebug.

Answer 2

Works for me: http://jsbin.com/amovo/edit

Answer 3

You're using jQuery's trim method incorrectly it should be:

var className = $.trim($(this).text()).toLowerCase();