Child div doesn't override Parent

Question

I'm stuck with a very, very basic problem. Searched a bit, but couldn't find any answer. These are my nested classes. in .css file. Here's the code:

.x{
  color: blue;
}

.y{
  color: red;
}

.x:hover{
  opacity: 0.1;
}

.y:hover{
  opacity: 1;
}

<div class= "x">
  <div class = "y">
     <p>ABC</p>
   </div>
</div>

At color property color of ABC is red so child overrides parent. But when it comes to hovering, opacity is 0.1 as parent overrides child. What's going under this behavior? I know it's basic, so any help would be appreciated.

stackblitz: https://stackblitz.com/edit/angular-ivy-srdbcw?file=src/app/app.module.ts

score 1 · Accepted Answer · answered Feb 05 '21 at 07:22

It's because opacity works for whole element of x. So if you have multiple nested elements, then it's opacity is added up. Means x set opacity for itself, then y sets opacity to itself and so on, it's not inherited by child elements:

span {
  background-color: red;
}

div {
  opacity: 0.9;
}

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <span>SPAN TEXT with 8 parents</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div>
  <span>SPAN TEXT with 1 parent</span>
</div>

Same works for any other attributes, that acts on only current element: margin, padding, display, border, etc.

Child div doesn't override Parent

1 Answers1