CSS inheritance

Question

 .x-panel-myheader{overflow:hidden;zoom:1;color:#15428b;font:bold 11px tahoma,arial,verdana,sans-serif;padding:5px 3px 4px 3px; border:1px solid #99bbe8;line-height:5px;background: transparent url(../images/default/panel/white-top-bottom.gif) repeat-x 0 -1px;}
.x-panel-myheader .x-panel-body { background-color: Transparent;  }
.x-panel-myheader .x-toolbar { background-color:inherit; border:0px ;}

`
<div class="x-panel x-panel-myheader x-border-panel x-panel-noborder" id="pnlHeader" style="width: 608px; top: 0px; left: 0px;">
  <div class="x-panel-bwrap" id="ext-gen62">
     <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder" id="ext-gen63" style="width: 608px; height: 39px;">
        <div class="x-toolbar x-small-editor x-abs-layout-item" id="tbarTest" style="top: 17px; left: 5px;">

`

how does CSS inheritance work? I want to apply a different CSS to div class="x-toolbar " Not sure how to access it.

Answer 1

The only way to apply a different style to x-toolbar is to inject the style AFTER the previous definition. This way you override the previous defintion.

If you have control over the source, you can add a style by a different name and just put it in the class list on each of those elements.

Answer 2

Simply put, the rules say that later CSS declarations overwrite earlier declarations. And "style" attributes always overwrite "class" attributes.

If overwriting a class that cascades several elements (.x-panel-myheader .x-toolbar), you'll need to include the full "path" when overwriting it. In your sample it would be:

.x-panel-myheader .x-toolbar {
    /* new styles here */
}

However, if you want to overwrite something that's declared in the "style" attribute, then you can either append the !important flag or you'd have to edit the style itself:

.x-panel-myheader .x-toolbar {
    /* new styles here */
    background-color: #000 !important;
}

UPDATE: It looks like you edited out the div element with the x-panel-myheader attribute, so my examples won't necessarily work with the new code.

Answer 3

Where has the -myheader in your CSS come from? You don't have x-panel-myheader in your HTML anywhere.

Answer 4

The problem appears to be that the CSS rule is defined to apply to:

.x-panel-myheader .x-toolbar

That means that it will apply to anything that has a class of "x-toolbar", but only if it is contained inside something else that has a class of "x-panel-myheader".

Your HTML doesn't show anything with the class "x-panel-myheader", so I'm unable to determine whether this is what's causing your problem or not. If the CSS rule doesn't appear to be working at all, that's probably why. If you just want it to apply to everything with a class of "x-toolbar", change the line to:

.x-toolbar { background-color:inherit; border:0px ;}