I want the width of "p" element to be 50% if it has some text. But if it has an image then width should be 100%
<div class="post-body">
<p>
<img src="someimage.jpg" style="width:100%" />
</p>
<p>
Make this p width 50%
</p>
</div>
Unfortunately I have no control over the generated html and I cannot change it since it is generated by some editor. I cannot assign classes to each "p" as I have no control over generated html. I must only use CSS.
I tried below, but it doesn't work. I am sure this can be done using not selector. If "p" doesn't have image as child element, make width 50%. What am I doing wrong?
.post-body p :not(img) {
width: 50% !important;
}