1

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;
}
suomi-dev
  • 643
  • 9
  • 20
  • You can't do this using CSS. There is no parent selector, so no way of styling your paragraph element based on the content inside of it. – George Jun 20 '18 at 13:38
  • its in the name. Cascading style sheets – Budyn Jun 20 '18 at 13:39
  • 2
    a simple trick is to make all the `p` width:50% and the img width:200% so they overflow and you have the 100% – Temani Afif Jun 20 '18 at 13:42
  • https://wordpress.stackexchange.com/questions/16033/apply-class-to-every-paragraph-that-holds-image may be this helps you – vaishali kapadia Jun 20 '18 at 13:48
  • Yes, it seems that parent selector is not available in CSS. This can be handled using jquery/javascript $('p').has('img').css({'width': '100%'}); – suomi-dev Jun 20 '18 at 14:10

0 Answers0