Question

I have an Html that contains something like:
(Multiple divs within div A).

<div class="a">
    <div class="b"></div>
</div>

My css looks like that:

.a div {
    border: solid;
    border-width: thin;
}

.b {
    border: none;
    border-width: 0px;
    border-collapse: collapse;
}

For some reason b’s values will not override a.
however, if i just write a rather than “a .div” i won’t get the behavior expected for the other divs inside a.

The only way i got this to work is using “important!” (ie “border: none!important”;) but that seems less than elegant.

would love any ideas as to what is going on there..

Ehud.

Answer 1

.a div has a higher specificity than .b.
If you want the css for .b to override the .a one, give it a higher specificity still, for instance .a div.b.

(Or you can use !important, yes, but that is not recommended here.)