Element does not take parent's background

Question

Element does not take parent's background

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)

2

I have a red background , which I formatted in body , and I have a white background content. In the <h2> tag with the following text whats language do you want is in there, and is not formatted by white , why?

HTML

<body>
    <main role="main" class="bgfo">
        <div class="intro-lang">
            <header class="lang-header">
                <div class="logo">
                <!--
                    <h1>Free time</h1>
                    <span>o portal da descriçao</span>
                -->
                </div>
            </header>

            <!-- BEGINNING QUESTION LANGS -->
            <h2 class="question-title">What language do you want ?</h2>
            <nav class="lang-nav">
                <ul>
                    <li><a href="#">Portuguese</a></li>
                    <li><a href="#">English</a></li>
                    <li><a href="#">Spanish</a></li>
                </ul>
            </nav>
            <!-- END QUESTION LANGS -->

                <footer class="lang-footer clear">
                    <small>Like faceboook / Twitter / G+</small>
                </footer>
        </div>
    </main> 
</body>

CSS

*{margin:0; padding:0;  font-family: 'arial'; background: red;}
a{text-decoration: none;}
/* Fonts*/
.clear{clear: both;}
.intro-lang{
    width: 800px;
    margin: 150px auto;
    position: relative;
    background: white;
}
.lang-header{
    margin-bottom: 80px;
}
.question-title{
    font-family:'arial';
    font-size: 40px;
    letter-spacing: 4px;
    text-align: center;
    color: #402E15;
}
.lang-nav {
    width: 500px;
    margin: 30px auto;
}
.lang-nav li{
    float: left;
    margin:  20px;
}
.lang-nav a{
    background: #402E15;
    padding: 10px;
    color: #FFB853;
    font-size: 20px;
}
.lang-nav a:hover{
    background: brown;
    color: white;
}
.lang-footer{
    text-align: center;
    margin-top: 200px;
}

Codepen example .

css

asked by anonymous 13.08.2014 / 16:08

4 answers

How to insert values from a Select field into the database Handling related data Asp.net and C #

score 2 · Answer 1

Background is not a property that the child inherits from the parent. It's specific.

Would you like the .question-title class to have the white background, correct?

Then ...

.question-title{
  background: #fff; 
}

score 1 · Answer 2

The element <h2> is with the red background because of the rule *{margin:0; padding:0; font-family: 'arial'; background: red;} which is applied to all elements by the * selector, to change this you must assign a rule to <h2> . Example:

.intro-lang h2 {
    background-color:white;
}

score 1 · Answer 3

If you do not need support for browsers IE8 or earlier, just use background: transparent; on the element that should "inherit" the color.

For example:

.question-title{
    font-family:'arial';
    font-size: 40px;
    letter-spacing: 4px;
    text-align: center;
    color: #402E15;
    background: transparent;
}

score 1 · Answer 4

To replicate the white background to all children of the element, you can do this:

.intro-lang *{
    background:white;
}

To replicate only to h1 titles:

.intro-lang h1{
    background:white;
}