This question already has an answer here:
I do not want to inherit the child opacity from the parent in CSS
If a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements. Read this http://www.impressivewebs.com/fixing-parent-child-opacity/
It is not going to happen the way you want. If innermost is inside inner, it is part of its content, and will be transparent too. Depending on what you want to achieve, you can apply an alternative. For example, a transparent background. Or remove innermost from inner, and use position absolute:
<div style="position:relative;margin-left:20px"> <div class="inner" style="opacity:0.5;"> </div> <div class="innermost" style="position:absolute; left:0; top:0;"> <p>My content</p> </div> </div>
I think you can try to add css property "style: none" for your class "innermost". Doing that, you "stop" the opacity specified below.