Select odd even child excluding the hidden child

Question

Line 3 is a hidden

. I don\'t want that one to be taken from the odd/even css rule.

What is the best approach to get t

相关标签:

Answer 1

Thanks Joe (+1) for pointing out the css pseudo-selector rules and the php code which I could pretty much use 1:1 in jQuery looking like this:

var classToAdd = visibleBoxes%2 ? 'even' : 'odd' ;
$(this).addClass(classToAdd)

Answer 2

Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.

If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.

If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

Even trying to do something tricky like

.box[class='box']:nth-of-type(even)

doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.

I'm not sure there's any way to do this purely with CSS - I can't think of any right now.

Answer 3

Hide the rows you want to hide calling .hide() for each table row, then call

$("tr:visible:even").css( "background-color", "" ); // clear attribute for all rows

$("tr:visible:even").css( "background-color", "#ffffddff" ); // set attribute for even rows

Add your table name to the selector to be more specific. Using :even makes it skip the Header row.