Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>Update</h2> <p>Here is another <kbd><a href="http://jsfiddle.net/p337/47FQw/" rel="nofollow">JsFiddle</a></kbd>, but this also probably won't work for the OP as it uses jQuery.</p> <h3>jQuery</h3> <pre><code>//onload: checkStyle(); //checks if the h4 is empty, and hides the whole div if so. function checkStyle () { if ($('#testimonials h4').is(':empty')) $('#testimonials').hide(); else $('#testimonials').show(); } </code></pre> <p><hr> <strong>This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.</strong></p> <p>Assuming you are ok with CSS3, and the <code>&lt;h4&gt;</code> is literally empty, you can modify your CSS to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3anot" rel="nofollow"><code>:not</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3aempty" rel="nofollow"><code>:empty</code></a> selectors.</p> <h3>CSS</h3> <pre><code>#testimonials h4:not(:empty) { font-size: 20px; line-height: 30px; font-family:"freight-big-pro"; font-style: italic; border-bottom: 1px solid #666; padding-bottom: 20px; padding-top: 20px; } #testimonials h4:not(:empty) strong { display: block; font-family:"freight-sans-pro", sans-serif; font-style: normal; font-size: 12px; } </code></pre> <p>Here is a <kbd><a href="http://jsfiddle.net/p337/CD4nT/" rel="nofollow">JsFiddle</a></kbd>. You can add content to the h4 to see how it works.</p> <p>Alternatively, you could even do the opposite, and have a <code>display:none;</code> for empty <code>&lt;h4&gt;</code>s:</p> <pre><code>#testimonials h4:empty{ display:none; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload