Question

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

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).