Tag header, daughter of tag Section, inherits values from other tag header

Asked

Viewed 262 times

3

I have this HTML structure:

<body>
    <header>
    </header>
    <div class="limit">
        <section class="conteudo">
            <header>
                <h1>TESTE</h1>
                <h3></h3>
            </header>
            <article>
            </article>
        </section>
        <section class="comentarios">
        </section>
    </div>
    <footer>
    </footer>
</body>

And this CSS style sheet:

/* header principal - topo da pagina */
header{
    background:#FE634A;
    border-bottom:2px solid #D24726;
    width:100%;
    height:100px;
}

section.conteudo{
    width:960px;
    height:200px;
}

/* tag header da section.conteudo - titulo do artigo*/
section.conteudo header{
    width:960px;
    height:200px;
}

What happens?

The 'Section.content header' selector inherits the 'header' attributes which is something that I do not happen, what do I do to prevent this? Some elegant solution so that this does not happen?

In case my site is getting like this:

site

html css

2 answers

5


One solution would be to give the first a class header:

<body>
    <header class="header-principal">
    </header>

.header-principal {
    ...
}

Another would be to use the child selector so that the first rule only applies to headers directly below the body:

body > header {
    ...
}

Finally, you can "undo" on header internal what you did on the external (resetting the properties to their value default):

section.conteudo header{
    background:transparent;
    border-bottom: medium none inherit; /* Acho que é esse o default */
    width:960px;
    height:200px;
}

  • you know? I didn’t find it so elegant to have to use body > header to do this, is there any other solution to this? Or this is the best?

  • @heromax Personally, I would go with the classes. But I have no reason, objective or not, to choose between one and the other... Except, with classes, you can style different elements the same way if you want.

  • Maybe yes, I change, but I will use that you answered, thanks for the help! : ) I marked as solved! Now yes the page is the way I wanted it. vlw ae.

0

Put a child attribute

section.conteudo>header
{

}

  • I put it the way you asked, it didn’t work but I tried 'body>header' and it worked, so vlw ai by the tip.But do you have a more "elegant" solution, because I didn’t think it was cool to use 'body>header' to style the main <header> (The top of the page)

  • @heromax You see some specific problem of using body > header? Unless you are worried about changing the page structure in the future and forgetting to change the rule, I see no problem using the child selector...

  • maybe yes, I change, but I will use that you answered, thanks for the help! :)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.