title: CSS hide grandparent div and all child elements when a custom element has no value
body: <p>I am trying to hide the grandparent div and all of its child elements when a custom element in the grandparent div is empty. I have HTML that I unfortunately cannot control directly as this is built on a Salesforce Community which forces HTML to be created in a certain way. However, I can edit the CSS and JS to achieve this.</p>
  <p>Here's an example of the HTML where I want to hide the grandparent div with the class =&quot;slds-col slds-grid slds-size_12-of-12&quot; when the element &quot;lightning-formatted-text&quot; is empty and leave it in place when a value is in that element:</p>
  <pre><code>&lt;div c-contactinformation_contactinformation=&quot;&quot; class=&quot;slds-col slds-grid slds-size_12-of-12&quot;&gt;
    &lt;div c-contactinformation_contactinformation=&quot;&quot; class=&quot;slds-border_bottom slds-clearfix&quot;&gt;
      &lt;div c-referralcontactinformation_referralcontactinformation=&quot;&quot; class=&quot;slds-float--left&quot;&gt;
        &lt;lightning-output-field c-contactinformation_contactinformation=&quot;&quot; class=&quot;slds-form-element slds-form-element_stacked&quot; lightning-outputfield_outputfield-host=&quot;&quot;&gt;&lt;span lightning-outputfield_outputfield=&quot;&quot; class=&quot;slds-form-element__label&quot;&gt;Last Name&lt;/span&gt;
          &lt;div lightning-outputfield_outputfield=&quot;&quot; class=&quot;slds-form-element__control&quot;&gt;
            &lt;lightning-formatted-text lightning-outputfield_outputfield=&quot;&quot; class=&quot;slds-form-element__static&quot;&gt;testLastName&lt;/lightning-formatted-text&gt;
            &lt;slot lightning-outputfield_outputfield=&quot;&quot;&gt;&lt;/slot&gt;
          &lt;/div&gt;
        &lt;/lightning-output-field&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have tried a lot of varieties of this CSS with little success when that element is empty:</p>
  <pre><code>.slds-col.slds-grid.slds-size_12-of-12 lightning-formatted-text:not(:empty):before {
    display: block;
  }
  </code></pre>
  <p>What I've noticed is removing the below part of the HTML does allow this to work. I've tested in JSfiddle by removing this and adding a &quot;data-label&quot; to the &quot;lightning-formatted-text&quot; element with some value and adding &quot;content: attr(data-label);&quot; to the CSS above</p>
  <pre><code>&lt;lightning-output-field c-contactinformation_contactinformation=&quot;&quot; class=&quot;slds-form-element slds-form-element_stacked&quot; lightning-outputfield_outputfield-host=&quot;&quot;&gt;&lt;span lightning-outputfield_outputfield=&quot;&quot; class=&quot;slds-form-element__label&quot;&gt;Last Name&lt;/span&gt;
  
  &lt;/lightning-output-field&gt;
  </code></pre>
  <p>Any ideas on a CSS solution to letting this work with that custom element &quot;lightning-output-field&quot; and the span after it in the HTML? If this cant be done in CSS, what would a JS solution be?</p>
  <p>Thank you in advance!</p>