title: CSS hover effect on certain condition (ie contains text)
body: <p>I want my css hover style to only happen when the inner span(with class "ag-header-group-text") is not empty (ie showing text). Is this possible through the css only?</p>
  
  <p><a href="https://jsfiddle.net/N8qah/13/" rel="nofollow">https://jsfiddle.net/N8qah/13/</a></p>
  
  <pre><code>&lt;div class="ag-header-group-cell ag-header-group-cell-with-group" style="width: 80px;"&gt;
      &lt;div class="ag-header-cell-resize"&gt;&lt;/div&gt;
      &lt;div class="ag-header-group-cell-label"&gt;&lt;span class="ag-header-group-text"&gt;TEST&lt;/span&gt;&lt;span class="ag-header-expand-icon"&gt;&lt;svg width="10" height="10"&gt;&lt;polygon points="0,0 10,5 0,10"&gt;&lt;/polygon&gt;&lt;/svg&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I changed my css to this which works in that it does't active unless the inner span is not empty - the only issue is the span is highlighted instead of the most outerdiv that the hover happens on</p>
  
  <pre><code>.ag-header-group-cell:hover  span.ag-header-group-text:not(:empty) {
      background-color: #00008A;
  }
  </code></pre>