Element does not take the parent background

Asked

Viewed 549 times

2

I have a background red colored, that I formatted him in the body, and I have a background white color content. Tag <h2> with the following text Whats language do you want is inside, and is not formatted by the 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;
}

Example in codepen.

css

4 answers

2

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

You’d like the class .question-title had the white background, correct?

So...

.question-title{
  background: #fff; 
}

  • Um, cool! I thought I inherited it. Thanks =)

1

If you don’t need IE8 or earlier browser support, just use background: transparent; in the element that must "inherit" the color.

For example:

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

  • background:transparent works on IE8?

  • Good Felipe. I didn’t know it... Thank you!

  • The ideal in IE8 is to take a 1px png and give background-repeat:repeat

  • Good Felipe, I didn’t know this

1

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

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

1

To replicate the white background for all children of the element, you can do so:

.intro-lang *{
    background:white;
}

To replicate for titles only h1:

.intro-lang h1{
    background:white;
}

Browser other questions tagged css

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