Why isn't my embedded style taking precedence over styles in my external stylesheet?

Question

Hi, I have the following stylesheet:

/* MyStylesheet.css */
.MyForm .MyInput fieldset { border: 2px solid grey }

And then the following HTML code:

<div class="MyForm">
 <div class="MyInput">
  <fieldset>
   <style type="text/css">
    .MyInnerFieldsets fieldset { border: 0 }
   </style>
   <div class="MyInnerFieldsets">
    <fieldset>
    </fieldset>
    <fieldset>
    </fieldset>
   </div>
  </fieldset>
 </div>
</div>

All fieldsets are receiving the 2px solid grey border from the external stylesheet. I thought the nested fieldsets would receive the 0 border from the embedded style, since the selector ".MyInnerFieldSets fieldset" takes precedence over ".MyForm .MyInput fieldset". I tested this in Firefox 3.6.8. Is this the expected behavior or is this a Firefox problem?

Thanks

Answer 1

.MyForm .MyInput fieldset { border: 2px solid grey }

This rule has 2 classes specified, so it's more specific than the latter rule. Simply make the latter rule as specific or more specific by prepending it with the same class name.

Answer 2

The selector

.MyForm .MyInput fieldset 

has a greater specificity (is more specific) than the selector

.MyInnerFieldsets fieldset

A more specific selector overrides a less specific one. Read about specificity and how it's calculated here.

To solve it, make your second selector more specific (such as .MyInput .MyInnerFields fieldset), or make the first one less specific (.MyInput fieldset).