CSS does not override inherited values

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

Your selectors are wrong.

Instead of

a. div {

Write

div.a {

(select any div with a class of "a")

Instead of

b {

(which will actually try to style all b elements)

Use

.b {

(which says select anything that is defined by the class of "b" )

EDIT (in response to response)

To select all divs that are inside a div with the class of "a", use the following selector:-

div.a div 

Answer 2

.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.)