CSS selector for parent with blank element

[idan]

I’m trying to make a selector for all <li> elements containing a blank <p> element:

li>p:blank {
  display: none;
}

<li>
  <p>Size</p>
  <p></p> <!-- blank -->
</li>

<li>
  <p>Color</p>
  <p>Blue</p> <!-- NOT blank -->
</li>

In this example I’d like to hide the first <li> instnace (the one with blank <p>)

Is this possible?

[Beverleyh]

There is currently no parent selector in CSS although there is for empty elements https://css-tricks.com/almanac/selectors/e/empty/

[idan]

Hi Beverley, how would I use the empty selector to select the li elements? (there will be always a value in the first <p> but in the second <p> it may be either empty or with value, maybe there’s a method using nth-child(2) to specifically select <li> with a 2nd <p> child that is empty?

[Beverleyh]

You couldn’t select the parent li with CSS as there’s no way in CSS to traverse back up the DOM.

You’d have to look in to JavaScript.

[idan]

https://css-tricks.com/parent-selectors-in-css/

a < img { border: none; }

“it would select <a> tags but only if they contained an <img> tag”
This one looks quite close to what I’m trying but wasn’t sure how to implement this method in my example
I tried the below but can’t get what I’m doing wrong:

li < p:empty {
  display: none;
}

In this example it Should select <li> tags but only if they contained an empty <p> tag; but it doesn’t, although it’s the exact same as the other example only with different tags

ps. this HTML needs to run within a javascript-disabled framework

Edit: Just realized this was only a suggested syntax rather than a working method
Is there any other HTML/CSS workaround to hide <li> elements with an empty <p> ? maybe with data selectors?

[Beverleyh]

If you could manually put a class or something on an empty element’s parent in the markup, THEN you could do it with CSS, but you couldn’t do it automatically (unless you use JavaScript).

[idan]

That sounds like a good start, I do have these classes on the li elements

<li id="size1" class="size">
  <p>Queen</p>
  <p>80" x 90"</p>
</li>

<li id="size2" class="size">
  <p>King</p>
  <p></p> <!-- N/A -->
</li>

The values in the <p> element vary across each item, some items have a value only in Queen, some have King, others have both

[Paulie_D]

Is there any other HTML/CSS workaround to hide <li> elements with an empty<p> ? maybe with data selectors?

AS Beverley said, you need to be able to specifically identify the li that have an empty p.

How you do that is up to you, whether by applying a class or data-attribute is up to you but it will have to be hard-coded in the HTML.

For instance:

<li id="size1" class="size">
  <p>Queen</p>
  <p>80" x 90"</p>
</li>

<li id="size2" class="size has-empty-p">
  <p>King</p>
  <p></p> <!-- N/A -->
</li>

[Author]

Posts