.class1 .class1_1{ div {background-color:#b0c4de;} } Code (markup): I try <div class="class1_1">div1</div> <div class="class1">outerDiv <div class="class1_1">innerDiv <div>InnerMost Div</div> </div> </div> Code (markup): but all fail. I have interested to know these because these type of css class is always seen in gwt project.
To style the innermost div, use the following: .class1 .class1_1 div { background-color:#b0c4de; } Code (markup):
.class1 .class1_1{ div {background-color:#b0c4de;} } HTML: This is wrong.... Try this, it tells that Look for div in the class1_1 which is under the class1 .class1 .class1_1 div{ background-color:#b0c4de; } HTML:
I know this is a bit irrelevant to your question, but if it is not necessary to format your divs like that you should just add another class name to the div you want to style. The CSS will be processed faster than if you nest three containers like how you are doing. I am not saying that your approach is wrong ( it is not wrong, I do it myself for certain cases) but if you are able to just add another class it will handle it much faster. Hope you find this helpful.