Как описать nth-child для элементов с динамически изменяемыми классами?

Question

[Артем]

Здравствуйте.
ссылка
Есть таблица, строки в которой обозначены с помощью селекторов

.table-position:nth-child(2n-1) {background: #F1F1F1;}
.table-position:nth-child(2n) {background: #FEFEFE;}

В обработке событий от слайдера слева я меняю класс tabe-position на hidden. Блоки скрываются, но стили не перестраиваются.
Почему так получается, и как задать правила для nth-child так, чтобы при снятии table-position с элемента, во всей таблице перестраивались стили?

Answer 1

[ukoHka]

Ни :nth-child(), ни :nth-of-type() не поддерживают фильтрацию по классу. Они считают только количество дочерних элементов родителя вообще и определенного типа соответственно.
Вам стоит попробовать решить проблему с помощью JS:

$(".table-position").filter(function(index, element){
    return index % 2 == 1;
}).addClass("graybg");

.graybg {
background: gray;
}

Answer 2

[Sayonji]

Используйте другой класс:

.table-bgclass:nth-child(2n-1) {}
.table-bgclass:nth-child(2n) {}

А в коде меняйте классы так:

class='table-bgclass table-position'
class='table-bgclass hidden'