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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

В этом случае вам не нужно использовать тег! Важный для сохранения фона при наведении.

Answer 3

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

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

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