I using Semantic UI to style my app. In a drop down menu, I display headers followed by items that are part of the header. When using the "search" functionality of semantic, it seems to "filter" out the non matching items by adding a filter class and styling it appropriately.
I want to apply a custom style to hide the header if all the 'items' it refers to have been filtered out. For example ...
<div class="menu">
<div class="header" /> <!-- How do I find (and style) this one with css? ... -->
<div class="item filtered"/> <!-- ... as all the items beneath it have a class of 'filtered' -->
<div class="item filtered"/>
<div class="header" /> <!-- but not this one where there is at least one item after it (and before next header) which is not filtered -->
<div class="item filtered"/>
<div class="item "/>
<div class="item filtered"/>
<div class="item "/>
<div class="item filtered"/>
<div class="header" />
<div class="item "/>
<div class="item filtered"/>
<div class="item "/>
<div class="item filtered"/>
<div class="item "/>
</div>
I can add any new class names to the headers or items, but I cannot change the hierarchy as it would break the semantic UI styling. The semantic ui library expects items/headers to be in a particular way as far as I can tell.
None of the css selectors or psuedo classes seem to help.
Alternately, if there is any other way of hiding the headers of empty items without using css selectors, either out of the box functionality in semantic ui or using javascript that can work with semantic ui search functionality, that would be very useful.
