CODEWITHSUNDEEP
htmlcss
Invictus
Invictus

Reputation: 250

css Grandparent > Parent1, Parent2 > Child

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?

Upvotes: 1

Views: 75

Answers (2)

Martijn
Martijn

Reputation: 16103

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;
}

Upvotes: 2

Invictus
Invictus

Reputation: 250

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.

Upvotes: 0

Related Questions