css organization question

[canadianjameson]

Hey,

if i have the following setup:

#intro {
margin-left: 205px;
margin-top: -25px
}
#mainLogo {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
height: 315px;
width: 417px;
padding: 20px;
}
...
<div id="intro">
	<div id="mainLogo"><img src="images/happy.gif"></div>
</div>

is there any way to code the css according to the heirarchy in the html?

say like

#intro {
margin-left: 205px;
margin-top: -25px
}
#intro #mainLogo {
display: block;
...

so that when someone is reading the CSS they know that #mainlogo is a child of #intro?... and would i even want to bother?

[_Aerospace_Eng_]

I wouldn't bother since you can only have one id per page. Now if this element was to change in styles constantly then you might put a class in a certain parent element or something but if its not going to change I say let it be since you can only have one id. It would be different if it was a class.

[canadianjameson]

good point ... but if it were a class, how would i do it?

I inquired because, upon reflection, it seems that various coding errors i make are the result of changing a parent attribute that in turn affects the child but I end up forgetting about the hierarchy and losing hours trying to figure it out

i figured if I took the extra 5 seconds to give myself a visual breakdown of what can affect what, i may save myself more time in the end(?)

so yea, although i may not do it, how would it be done?

[_Aerospace_Eng_]

Just look at it this way. The more specific you get, the more of a chance you have of the new specific style to override the less specific style. So for example, you want all divs with class="square" to be red with a 1px border but you want one of the square divs that is the only one in your intro div to be blue instead of red.

<div id="container">
<div class="square">blah</div>
<div class="square">blah</div>
<div class="square">blah</div>
<div id="intro"><div class="square">blah</div></div>
</div>

#container .square {
background:red;
border:1px solid #000;
width:300px;
height:300px;
}
#container #intro .square {
background:blue;
}

The more specific one overrides the less specific one.

[canadianjameson]

this may sound stupid... but what exactly do you mean by specific

perhaps its because its 1am, but that word is confusing me in the context of "more specific overriding less specific"

[_Aerospace_Eng_]

Just look at the example. The more cascading you get the more overriding you have.