CSS inheritance
.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 different CSS for div class = "x-toolbar" Not sure how to access it.
a source to share
In simple terms, the rules say that later CSS declarations overwrite earlier declarations. And the "style" attributes always override the "class" attributes.
If you are rewriting a class that cascades multiple elements (.x-panel-myheader.x-toolbar), you will need to include the full path when rewriting. In your example, this would be:
.x-panel-myheader .x-toolbar {
/* new styles here */
}
However, if you want to overwrite something declared in the style attribute, then you can either add a flag! important, or you have to edit the style itself:
.x-panel-myheader .x-toolbar {
/* new styles here */
background-color: #000 !important;
}
UPDATE: It looks like you've edited the div element with the x-panel-myheader attribute, so my examples won't necessarily work with the new code.
a source to share
The problem is that the CSS rule is defined to apply to:
.x-panel-myheader .x-toolbar
This means that it is applicable to everything that has the class "x-toolbar", but only if it is contained within something else that has the class "x-panel-myheader".
Your HTML doesn't show anything with the "x-panel-myheader" class, so I cannot determine if this is the cause of your problem or not. If the CSS rule doesn't work at all, maybe why. If you just want it to apply to everything with the "x-toolbar" class, change the line to:
.x-toolbar { background-color:inherit; border:0px ;}
a source to share
The only way to apply a different style to the toolbar is to enter the style AFTER the previous definition. This will undo the previous setting.
If you have control over the source code, you can add the style with a different name and simply put it in the list of classes for each of these elements.
a source to share