Why does changing parent’s style has no effect in child’s style in css?

[shivajikobardan]

Take this code for example:

 <div class="super">
        <div class="extra">text</div>
 </div>

*

.extra
{
    background-color: crimson;
}

.super{
    background-color: cyan;
}
*

The background color is crimson at last. It’s related to CSS specificity. I’m curious why that’s the case? Why is background-color not inherited here? Or is this a property that never gets inherited? If there was another property that could get inherited, would the result be different?

[dev7060]

The background color is crimson at last. It’s related to CSS specificity. I’m curious why that’s the case? Why is background-color not inherited here? Or is this a property that never gets inherited? If there was another property that could get inherited, would the result be different?

Some properties are inherited, and some are not. The child element does not inherit background-color.

You may use the inherit setting for such behavior.

[richard110]

You have to specify the background-color in child's style also. Check the reference for style CSS on the website.