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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • shivajikobardan
    New Member
    • Jun 2022
    • 12

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


    Take this code for example:

    Code:
     <div class="super">
            <div class="extra">text</div>
     </div>
    *

    Code:
    .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
    Recognized Expert Contributor
    • Mar 2017
    • 655

    #2
    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.

    Comment

    • richard110
      New Member
      • Nov 2022
      • 1

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

      Comment

      Working...