css Grandparent > Parent1, Parent2 > Child - html

Question

I wrote something like this in styles, but it only works for the #header in the #register:
HTML:
<div id="container">
<div id="register">
<div id="header">Register</div>
</div>
<div id="login">
<div id="header">Log in</div>
</div>
</div>
CSS:
#container > #register, #login > #header {
font-size: 30px;
font-weight: bold;
color: black;
}
Any suggestions?

Answer 1

You may only use an ID once per page. Calling them both #header will behave unpredictable. Sometimes it'll work, sometimes it won't. Some browsers allow it in some cases, others in other cases. Unpredictable.
Classes are ment for these cases. Also, as they are both decendants of #container, you do not need to select it twice:
<div id="container">
<div id="register">
<div class="header">Register</div>
</div>
<div id="login">
<div class="header">Log in</div>
</div>
</div>
#container > .register{
font-size: 30px;
font-weight: bold;
color: black;
}
I also suggest you take a like at the header element:
<div id="container">
<div id="register">
<header>Register</header>
</div>
<div id="login">
<header>Log in</header>
</div>
</div>
#container > header{
font-size: 30px;
font-weight: bold;
color: black;
}

Answer 2

I'm idiot...
<div id="container">
<div id="register">
<form> <!-- I did not notice this -->
<div id="header">Register</div>
</form>
</div>
<div id="login">
<form> // I did not notice this
<div id="header">Log in</div>
</form>
</div>
</div>
CSS:
#container > #register, #login #header { /* correct (without ">") */
font-size: 30px;
font-weight: bold;
color: black;
}
Everythink works... Sorry, my fault.