Question

I have a layout that looks like this

<div class="categoery">
    <span>categorie title</span>
    <table>
        <tr class="item show">....</tr>
        <tr class="item show">....</tr>
        <tr class="item none">....</tr>
    </table>
</div>

<div class="categoery">
    <span>categorie title</span>
    <table>
        <tr class="item none">....</tr>
        <tr class="item none">....</tr>
        <tr class="item none">....</tr>
    </table>
</div>

​

Now what I want to the is the following. The first div will be the category title, and the two rows.

Now in the second div, I want the whole div completely hidden.

CSS has no parent seelctor like: div < tr.none{ display:none; }.

I asume another thing I can use is the hasClass from jQuery, but I was wondering if there is a pure CSS approuch.

==

Maybe something like setting the div to height:0, but block elements(tr) with a top margin will force the div to expand??

Hope this makes sense.

Answer 1

You can do something like this

$('.categoery').each(function(k,v) {
    if($(this).children('table').find("tr").css("display")=='none') {
    // alternate
  //if($(this).children('table').find("tr").hasClass("none")) {
        $(this).children('span').hide();
    }
});

I even created a demo. I hope this was what was asked for.