Как заставить CSS влиять на все остальные элементы, которые не являются невидимыми [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь использовать CSS, чтобы изменить цвет фона в моих div. Я могу это сделать, но отображение каких div изменится. Я хотел бы иметь возможность чередовать только то, что отображается в данный момент. В противном случае цвет фона появляется довольно случайно в зависимости от несвязанных факторов, для которых видны элементы div.
Вот что я сейчас пытаюсь:

Код: Выделить всё

.dialog {
display:flex;
flex-direction:row;
align-items:center;
background-color: #FFFFFF22;
}
#output-table > .dialog:not([style*="none"]):nth-child(odd) {
background-color: #FFFFFF11;
}

И html:

Код: Выделить всё

stuff1
stuff2
etc....

В настоящее время, когда страница загружается, все элементы div видны, а цвет фона чередуется, но похоже, что ничего не меняется, когда некоторые элементы div становятся невидимыми (т. е. порядок чередования цветов тот же и не чередуется должным образом в зависимости от видимости).

Код: Выделить всё

.dialogПо умолчанию для 

установлено значение display:flex. JavaScript может установить каждый отдельный элемент как display:flex или display:none, но элементы не задаются индивидуально при загрузке страницы. Вот почему я стараюсь использовать not(\[style\*="none"\]), а не [style="flex"], поскольку я не уверен, что CSS обрабатывает эти два случая по-разному.
Я уверен, что мог бы решить проблему, если бы js добавлял/удалял классы при изменении отображения. Мне просто интересно, есть ли какое-нибудь решение только для CSS.
РЕДАКТИРОВАТЬ
Я уступил, и js добавил классы. Однако он ведет себя странно.






Подробнее здесь: https://stackoverflow.com/questions/791 ... -invisible