title: CSS Alternatives to style="display:none"
body: <p>I'm implementing a JSF component base where you must override the css being used or it will use its default css.  I'm trying trying to hide the <code>div</code> and I've tried to set the <code>rich-panelbar-header-act class style="display:none"</code>, but then it pulls in its default css.  Is there any way to add a style attribute to <code>rich-panelbar-header-act</code> (since I have to implement the class) that hides the <code>div</code>?  I've included my css and html below</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>element.style {
  }
  Matched CSS Rules
  .rich-panelbar-header-act {
  background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html);
  background-position: top left;
  background-repeat: repeat-x;
  vertical-align: middle;
  color: #FFF;
  background-color: #555;
  font-size: 11px;
  font-weight: bold;
  font-family: Arial,Verdana,sans-serif;
  }
  .rich-panelbar-header-act {
  border: 0 solid red;
  padding: 0 1px 1px 5px;
  cursor: pointer;
  }
  user agent stylesheetdiv {
  display: block;
  }
  Inherited from body.browserChrome.browserChrome2
  body {
  font: 12px/17px Helvetica, Arial, Verdana;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none"&gt;
  &lt;div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"&gt;&lt;div class="rich-panelbar-header " style=";"&gt;Leverage the whole set of JSF benefits while working with AJAX&lt;/div&gt;&lt;div class="rich-panelbar-header-act " style=";;;;display: none;"&gt;Leverage the whole set of JSF benefits while working with AJAX&lt;/div&gt;&lt;div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"&gt;&lt;table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="rich-panelbar-content " style=";"&gt;
  
  Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only
  
  give you access to the managed bean facility, Ajax4jsf advantages the action and value
  
  change listeners as well as invokes server-side validators and converters during the
  
  AJAX request-response cycle.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>