Child div doesn't override Parent [duplicate] - css

Question

This question already has answers here:
Why can't child elements override the opacity of parent with a greater value?
(1 answer)
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 2 years ago.
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

Answer 1

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.