Make css nth-child() only affect visible

Is there a way to only affect visible elements with this css?

table.grid tr.alt:nth-child(odd)
{
    background:#ebeff4;
}

table.grid tr.alt:nth-child(even)
{
  开发者_高级运维  background:#ffffff;
}

If i use a $('select some tr:s').hide() that hides some of the rows i get a mix of odd and even styling but all in a mixup.

---

I ended up using the solution Rodaine suggested in his comment, after the show/hide i do this:

$('.alt:visible:odd').css('background', '#EBEFF4');
$('.alt:visible:even').css('background', '#FFFFFF'); 

In my case the setting of background broke my hover, this was solved with !important to make the hover background stick.

table.grid tr.hover:hover
{
    cursor:pointer;
    background:#D2E0E9 !important;    
}

---

Another option would be to apply a class to the visible elements when hiding the others. Apply nth-child to this class (which is only applied to the visible elements.)

You don't have to use an !important tag to keep your hover-background in this case.

---

You could do:

$('some_selector tr:visible').hide()

Hope this helps