Which selector would be executed? - css

Question

CSS
#header #site_title_section {
float: left;
width: 300px;
margin-left: 30px;
text-align: center;
#site_title_section #site_title {
margin-top: 30px;
padding: 10px 0;
font-size: 40px;
color: #4379ab;
font-weight: bold;
}
#site_title_section #salogon {
font-size: 14px;
margin-left: 20px;
color: #333333;
}
Html
<div id="site_title_section">
<div id="site_title">
Professional
</div>
<div id="salogon">
New Media Company</div>
<div class="cleaner"> </div>
</div>
Could someone help me understand this
From the CSS codes "site_title_section" has appeared three times so when called in html codes which one would be executed?

Answer 1

First note there is a small error in your code:
#header #site_title_section {
float: left;
width: 300px;
margin-left: 30px;
text-align: center;
} /* <-- You forgot this */
Now to how CSS is read it goes like this:
[parent] [child1] [child of child1] ... { .. }
So for example think of it as going into the element in the HTML code. For example:
<div id="site_title_section"> <!-- #site_title_section part -->
<div id="site_title"> <!-- #site_title_section #site_title -->
Professional
</div>
<div id="salogon"> <!-- #site_title_section #salogon -->
New Media Company</div>
<div class="cleaner"> </div>
</div>
For #header #site_title_section, at least from the code that is shown. Even know we have #site_title_section inside. There is no parent with the id #header, so this does nothing. But supposed there was (you may have just forgot to paste it). Then it would effect the entire #site_title_section div.
Here is a fiddle with all your CSS affects (including an added header)