parent's opacity not working on child elements

Question

I have looked everywhere and cannot find what the issue is. I am setting the opacity on the parent element but the opacity doesn't seem to be applying to child elements.

Googling for the issue is only bringing up results like "How to apply an opacity without affecting a child element ". But in my case the child elements are "not" being affected when I need them to be affected by the parent's opacity value.

Here is the sample code:

<span style="opacity: 0.5">
  <div>hello</div>
</span>

Answer 1

The problem was that you put a block element (such as div) inside inline element (such as span) which is wrong from the first place.

If you put an inline element (such as button) inside an inline element (such as span) it works.

span {
  opacity: 0;
}

<span>
  <button>Inline Element, works!</button>
</span>

Also, you don't have to replace the span with div, just set the span to display: inline-block.

span {
  opacity: 0;
  display: inline-block;
}

<span>
  <div>Block Element, But parent span too. works!</div>
</span>