Question

I am trying to hide subsequent tr’s with role=”metadata” and the same data-group-id as the first occurring tr.

I cannot use JavaScript here and I am trying to achieve this using pure CSS.

<table>
    <tbody>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="1" role="metadata">
            <td>
                First rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="1" role="data">
            <td>
                Row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be hidden -->
        <tr data-group-id="1" role="metadata">
            <td>
                Rows group title
            </td>
        </tr>
        <!-- END this tr should be hidden -->
        <tr data-group-id="1" role="data">
            <td>
                Another row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="2" role="metadata">
            <td>
                Second rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="2" role="data">
            <td>
                Row belonging to group 2
            </td>
        </tr>
    </tbody>
</table>

Selectors like this…

[data-group-id="1"][role~="metadata"] ~ [data-group-id="1"][role~="metadata"]
    display: none

… work very well, except that data-group-id may change dynamically.

Something like this would be perfect (I know that this is invalid CSS code, its just my fantasy with regular expressions to help illustrating the problem):

[data-group-id="(.*?)"][role~="metadata"] ~ [data-group-id="\\1"][role~="metadata"]

Is there any way I can achieve this using only CSS?

Thanks in advance.

Answer 1

Seems to me that using the data-group-id in CSS is impractical, especially since it’s dynamically mutable and conditions of wether an element is hidden or not change. You end up with a huge chunk of CSS thats impossible to maintain.

In the initial rendering, it might be better to add a className so you determine serverside wether the initial state should be shown or not.

<tr data-group-id="1" role="data" class="hidden">
    <td>Another row belonging to group 1</td>
</tr>

I am assuming JavaScript is used to dynamically change data-group-id, so why not use JavaScript to add/remove the className “hidden” when/where it makes sense. At least in JavaScript you CAN use regular expressions 😉

When you get to the point where you have to write impossible, long winded, error prone and unmaintainable CSS expressions, you’re doing something wrong.

You’re going to have to write some code to achieve this anyways, might as well do it the clean way instead of trying to shoehorn it into a styling language that isn’t fit for the job.