title: can an entire css ".class" have it's specificity as !important?
body: <p>I am working heavily in jQuery UI widgets and themeing is becoming hard because of an oversight that I need to work around. </p>
  
  <p>Consider this problem: </p>
  
  <pre><code>&lt;div id="node" class="ui-widget"&gt;
      &lt;div class="ui-widget-content"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then this jquery</p>
  
  <pre><code>&lt;script&gt;
   $(function() { 
         $('#node').hover(function (){
             $(this).toggleClass("ui-state-error");
         });
   }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>I would like the ui-state-error to be !important to the nested div. This is pseudo code, but I find large examples of this happening where containers have css swaps and children (basicaly) ignore it. What is even worse is this: if I would like to be able to overwrite in jQuery say "backgroundcolor=ui-state-error:background-color knowing 100% it all won't go to pieces because I don't "know" necessarily that that background is the important one for the element in question.</p>
  
  <p>here is a fiddle of a case in point <a href="http://jsfiddle.net/WCuYH/1/">http://jsfiddle.net/WCuYH/1/</a></p>
  
  <p><strong>EDIT I am going to recommend this question is closed because there hasn't been any attempts at answers, only too much drift from the essence of the original post</strong></p>