CSS table with alternate background color with hidden elements

Question

I found some approaches to alternete colors using Javascript, but I can hide some elements in my table/datagrid but with this CSS the bg color doesn't alternate correctly:

CSS

.grid tr:not(.display-none):nth-child(2n+1) > td {
    background: red;
}
.display-none * {
    display: none;
}

HTML

<table class="grid">
    <tr><td>nono1</td></tr>
    <tr><td>nono2</td></tr>
    <tr><td>nono3</td></tr>
    <tr><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr><td>nono6</td></tr>
    <tr><td>nono7</td></tr>
    <tr><td>nono8</td></tr>
</table>

See the live sample

http://jsfiddle.net/WBn4U/

Here's some guidance on why `nth-child` doesn't work like this and a solution: http://stackoverflow.com/a/32380418/3597276 — Michael Benjamin, Sep 07 '15 at 13:32
[Pusre CSS solution](http://stackoverflow.com/a/42014074/3094153) — kornieff, Feb 02 '17 at 23:13

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

This isn't possible as the :nth-child pseudo class cycles through all children elements. Thus, you cannot exclude an element from the selection - even using :not is ineffective.

Selectors Level 3 - 6.6.5. Structural pseudo-classes

Standalone text and other non-element nodes are not counted when calculating the position of an element in the list of children of its parent. When calculating the position of an element in the list of children of its parent, the index numbering starts at 1.

My interpretation is that all element nodes are counted in the calculation. By stating that text and other non-element nodes aren't calculated, all element nodes must be calculated, as demonstrated.

To solve the problem, I would suggest just removing the element from the document altogether, via JS.

For simplicity, here is some jQuery:

$('table.grid tr.display-none').remove();

In doing so, you can now achieve the desired results using the following selector:

table.grid tr:nth-child(2n+1) > td {
    background: red;
}

jsFiddle example

score 2 · Accepted Answer · answered Nov 27 '13 at 23:42

So try

<table class="grid">
    <tr class="parent"><td>nono1</td></tr>
    <tr class="parent"><td>nono2</td></tr>
    <tr class="parent"><td>nono3</td></tr>
    <tr class="parent"><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr class="parent"><td>nono6</td></tr>
    <tr class="parent"><td>nono7</td></tr>
    <tr class="parent"><td>nono8</td></tr>
</table>

.parent:nth-child(odd) {
        background-color: #fff;
        }
        .parent:nth-child(even) {
            background-color: red;
        }

        /* after the first non-.parent, toggle colors */
        tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: red;
        }
        tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: #fff;
        }

        /* after the second non-.parent, toggle again */
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: #fff;
        }
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: red;
        }
        .display-none * {
            display: none;
        }

http://jsfiddle.net/vA5Wz/

It's a nice alternative, thanks! – Ragen Dazs Nov 28 '13 at 12:29 — Ragen Dazs, Nov 28 '13 at 12:29

score 1 · Answer 3 · answered Nov 27 '13 at 22:57

1

Give a look to this example:

http://jsfiddle.net/KSL7j/1/

Using jQuery

jQuery('tr:visible').filter(':odd').css({'background-color': 'red'});
jQuery('tr:visible').filter(':even').css({'background-color': 'yellow'});

Hope it helps

answered Nov 27 '13 at 22:57

Alessandro Incarnati

7,018
3
38
54

CSS table with alternate background color with hidden elements

3 Answers3