Css coloring table problem

Question

I've been trying to make a colored table with even rows a different color than the odd ones. The only problem I have is that I have to be able to do it even with hidden rows, because if for instance you hide row 2 then you see row 1 and row 3 the same color.

Here's what I have:

tr:not([display="none"]):nth-child(even){
    background: #EFEFFF;
}
tr:not([display="none"]):nth-child(odd){
    background: #E0E0FF;
}

This code doesn't work for me since browsers don't filter :not and :nth-child according to the given order. Any suggestions?

You're trying to use an _element attribute selector_ to select hidden elements, but `display` is a CSS property. — Matt Ball, Aug 14 '11 at 04:03
Aaahh so that was the problem. Thank you all any way ;). I'll try the given "class solution". — Gonzalo, Aug 14 '11 at 16:02

score 8 · Answer 1 · answered Aug 14 '11 at 03:55

8

Could you add a class to the visible rows so you could write it as:

tr.visible:nth-child(even) {
    background: #EFEFFF;
}
tr.visible:nth-child(odd){
    background: #E0E0FF;
}

Then use jquery to add/remove the class as you make rows visible/invisible?

answered Aug 14 '11 at 03:55

boatcoder

17,525
18
114
178

That's a pretty cool trick. I didn't realize that `nth-child` worked on the *selected set* - the [CSS3 spec](http://www.w3.org/TR/css3-selectors/#nth-child-pseudo) makes it sound like odd or even is calculated based on the tree. – OverZealous Aug 14 '11 at 04:12
1

haha I thought someone would come up with that solution. I just wanted to know if there's a solution that doesn't look like a workaround (no offense). – Gonzalo Aug 14 '11 at 04:13
Here's a working example if anyone wants to play with it: http://jsfiddle.net/KgAnV/ – OverZealous Aug 14 '11 at 04:17
8

@OverZealous Your expample doesn't work because as seen in the w3 site, 'nth-child' applies for the group of sibling elements, not the group of matched elements by the selector. I think the only solution is colouring the elements manually inside the javascript code. – Gonzalo Aug 16 '11 at 14:42
4

@Gonzalo is right, your solution doesn't work. Try to change the class of the first list item from '.visible' to '.hidden' in the jsfiddle link above (row 2 and 4 have the same color though you would expect them to differ according to your logic). :nth-child doesn't even take into account tag names, you can look at it as tag type [any]. :nth-of-type fixes this for tag names. The new (yet unimplemented) :nth-match(an+b of selector-list) fixes the issue for all selectors in general and so could be applied to your workaround with .visible class. – dave Sep 14 '12 at 13:11

score 1 · Answer 2 · answered Oct 09 '14 at 19:40

Ended up here while trying to tackle a similar problem. Used the following JS to update the CSS based on an added class after filtering.

$('tr.visible').filter(':odd').css('background-color', '#EFEFFF');
$('tr.visible').filter(':even').css('background-color', '#E0E0FF');

Note the flipped colors due to zero indexed arrays.

Css coloring table problem

2 Answers2

Linked