Tag header, daughter of section tag, inherits values from another tag header

Question

Tag header, daughter of section tag, inherits values from another tag header

Navigation

#1 by (5 votes)
#2 by (0 votes)

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 'header.content header' selector inherits header attributes which is something I do not happen, what do I do to prevent it? Any elegant solution for that not to happen?

In case my site looks like this:

html css

asked by anonymous 28.11.2014 / 03:50

2 answers

0

Place a child attribute

section.conteudo>header
{

}

28.11.2014 / 03:53

Customize calendar C # javascript function that receives three numbers as parameters and returns the largest

score 5 · Accepted Answer

One solution would be to give a class the first 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 header s directly below body :

body > header {
    ...
}

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

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