Выбор nth-child пропущенных скрытых элементов

Question

Я ищу только метод CSS (без JS), чтобы игнорировать скрытые элементы в подсчетах nth-child. Это возможно?

Я получил этот HTML:

<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item empty"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item empty"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 

Я пытаюсь целевым каждый второй галерея-элемент, который не является пустым, но это не работает:

.gallery-item:not(.empty):nth-child(2n) {}

Я не хочу использовать JS, потому что это сложный сайт с множеством точек останова, и я не хочу добавлять слушателей onresize для чего-то такого основного.

Answer 1

Вы должны использовать ниже код целевой второго пункта

.gallery-item:not(.empty):nth-child(2) { //not :nth-child(2n) 
    background:#ddd 
} 

Link JSFIDDLE

Answer 2

Это может быть нулевой пост, потому что он использует JS. Однако, похоже, это вариант только в этом случае. Вы не хотели использовать JS, что я понимаю. Но, насколько никто не приходит с CSS единственным решением, по крайней мере, считаю это: http://codepen.io/zvona/pen/jPZYNx

var galleryItems = document.querySelectorAll('.gallery-item:not(.empty)'); 

[].forEach.call(galleryItems, function(item, i) { 
    item.classList.toggle('notEmptyAndEven', i % 2) 
}); 

, а затем просто добавить .notEmptyAndEven селектор и правила CSS вам нужно.