Сделать css nth-child() влияет только на видимые

Есть ли способ влиять только на видимые элементы с помощью этого css?

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

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

Если я использую $('select some tr:s').hide(), который скрывает некоторые из строк, я получаю смесь нечетного и стильного стиля, но все в mixup.

Ответы

Ответ 1

В итоге я решил использовать решение Rodaine, предложенное в его комментарии, после показа/скрытия я делаю это:

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

В моем случае настройка фона сломала мой зависание, это было решено с помощью !important, чтобы сделать паттерн наведения.

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

Ответ 2

Другой вариант - применить класс к видимым элементам при скрытии остальных. Примените nth-child к этому классу (который применяется только к видимым элементам.)

В этом случае вам не нужно использовать важный тег, чтобы сохранить ваш hover-background.

Ответ 3

Вы можете сделать:

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

Надеюсь, что это поможет