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.
jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li. mybutton:nth-child(2)"). hide() .
Definition and UsageThe :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.
You can pass in a positive number as an argument to :nth-child() , which will select the one element whose index inside its parent matches the argument of :nth-child() . For example, li:nth-child(3) will select the list item with an index value 3; that is, it will select the third list item.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With