Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 269
Andreas Avatar asked Jul 08 '11 19:07

Andreas


People also ask

How do I hide the nth child in CSS?

jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li. mybutton:nth-child(2)"). hide() .

How do I select a specific Nth child in CSS?

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.

Which nth child () selector will target only the last list item?

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.

How do you target the nth child in SCSS?

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.


1 Answers

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;     } 
like image 94
Andreas Avatar answered Oct 13 '22 00:10

Andreas