44

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.

1
  • 4
    Have you considered reapplying the CSS after the $().hide() using $('.alt:visible:even') and $('alt:visible:odd')?
    – Rodaine
    Jul 8, 2011 at 19:45

3 Answers 3

20

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;    
}
2
  • 4
    Using !important in production environnment is not a good habit to have. If you end up using !important, it means the solution may be a bit more complicated, but it exists. In that case, you want to apply classes with jquery to still be able to hover without !important : codepen.io/gfra/pen/nFrEc
    – Gfra54
    May 29, 2014 at 7:54
  • Sometimes when using external libraries you don't have any choice in using "!important"
    – LarryBud
    Dec 26, 2021 at 15:32
-2

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.

1
-5

You could do:

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

Hope this helps

1
  • 1
    It was not the hiding that was my problem.
    – Andreas
    Jul 8, 2011 at 21:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.