CSS - hide if has child with class

Question

I'm trying to make a print stylesheet which hides (does not print) elements which do not have a child element with a set class.

I thought this might work but sadly it doesn't.

<style type="text/css" media="print">
    table:not( > thead > tr > th > .Collapse)  {
        display:none;
    }
</style>

I don't want to use any javascript if possible though.

Can this be done?

Here's the html for the element in question... the second table should be hidden when printed...

<table>
    <thead>
        <tr>
            <th>
                <span class="Collapse">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>
                <span class="Expand">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Joe Frambach, Jun 24 '13 at 16:04
If I am not mistaken, you can't do this without javascript. I might be wrong... hence the comment, and not an answer! :) — bPratik, Jun 24 '13 at 16:06
Impossible without parent selectors (which don't exist in CSS currently) or JS. Why can't the classes simply go on the tables? — MasNotsram, Jun 24 '13 at 16:07
almost dupe of: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar — bPratik, Jun 24 '13 at 16:08
bPratik please read the question you're linking to, and look at the existing "possible duplicate" listed on this question. — Joe Frambach, Jun 24 '13 at 16:11

MasNotsram · Answer 1 · 2013-06-24T16:09:14.937

I would suggest instead, putting the classes on the tables, and then selecting the spans inside them.

<table class="Collapse">
    <thead>
        <tr>
            <th>
                <span>Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table class="Expand">
    <thead>
        <tr>
            <th>
                <span>Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>

.Collapse {
   display:none;
}

.Collapse thead tr th span {
}

.Expand thead tr th span {
}

Colin Bacon · Accepted Answer · 2013-06-24T16:09:31.090

To target the span:

table > thead > tr > th > .Expand  {
    display:none;
}

Update

Targeting a css class and effecting it's parent is not currently possible. The easiest way to hide the table is to add a class to it, then you can target that class easily.

Example

<table>
    <thead>
        <tr>
            <th>
                <span class="Collapse">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table class="hide-for-print">
    <thead>
        <tr>
            <th>
                <span class="Expand">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>

I need to hide the whole table, not just the element `.Expand` — Tom, Jun 24 '13 at 16:05

CSS - hide if has child with class

2 Answers2