Geek Answers Handbook

Why body overriding footer html class

I am curious why the second color corresponds with the first one? Is there any way around this without adding !importantor wrapping it in the body class?

body.football h3 {
   color: #a07a40;
}

footer h3 {
   color: white;
}
+4
source share
4 answers

It becomes overridden because css will use the most specific selector over any other selector.

To solve this problem, you need to either use a flag !importantor change the footer selector to be more specific, the easiest way to do this is to use an identifier.

Example:

#footer h3{
    color: white;
}

<footer id='footer'><h3></h3></footer>
+1
source

, , . .

, , , , , , . .

:

, > . :

body.football > h3 {
   color: #a07a40;
}

footer > h3 {
   color: white;
}

<body class="football">
    <h3>Football is the Bees Knees</h3>
    <footer>
        <h3>Hi Ma Hi Pa</h3>
    </footer>
</body>

, OP div , IE:

section#football h3 {
   color: #a07a40;
}

footer h3 {
   color: white;
}

<body>
    <section id="football">
        <h3>Football Yo</h3>
    </section>
    <footer>
        <h3>Yo Football</h3>
    </footer>
</body>

: , , , .

+7

CSS . HTML, , , , , body.football .

0

There is an html error regarding typed code or css structure.

HTML:

<body>
    <div class="football">
        <h3>ho</h3>
    </div>
    <footer>
        <h3>test</h3>
    </footer>
</body>

CSS

body.football h3 {
   color: #a07a40;
}

footer h3 {
   color: red;
}

Fiddle example .

Or, if football is in the footer, you need to set the class.

footer h3 {
   color: red;
}

footer .football h3 {
   color: #a07a40;
}

Fiddle

0
source

More articles:


All Articles