nested divs should have 2 diff css styles

Question

I have 2 nested divs, both have

#x{
width:400px;
height:400px;
background-color:#fff;
color:#000
}

#y{
width:200px;
height:200px;
background-color:#000;
color:#ccc;
}


<div id="y"><div id="x">Here lies a x value</div></div>

I want the #x and #y to have individual css properties, but that is not the case, #x overrides the #y values

Any help appreciated.

Thanks Jean

Answer 1

#y{
width:400px;<-- add px.
height:400px;
background-color:#fff;
color:#000
}

#x{ <--changed to X, it was y
width:200px;
height:200px;
background-color:#000;
color:#ccc;
}

Also, when you id a div to x it will take the properties you detup in #x .

Answer 2

They do have individual properties. It is just that the nested x div is in front of the y div, so the y div is obscured. Try adding overflow: hidden; to #y and you will see that it constrains #x to it's footprint.

Answer 3

Specificity! As your two declarations have the same specificity, the one that comes last in the CSS is the one that is honoured. To increase the specificity of the inner target, try:

#y #x{
width:400;
height:400px;
background-color:#fff;
color:#000
}

#y{
width:200;
height:200px;
background-color:#000;
color:#ccc;
}

Here's a cracking article on the subject .