Selezione di elementi nascosti saltati all'ennesima potenza

Question

Sto cercando un modo CSS (no JS) per ignorare gli elementi nascosti nei conteggi nth-child. È possibile?

Ho questo 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> 

sto cercando di indirizzare ogni seconda galleria-oggetto che non è vuoto, ma questo non sta funzionando:

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

Non voglio usare JS perché questo è un sito complesso che ha molti punti di interruzione e non voglio aggiungere agli ascoltatori di ridimensionare qualcosa di così semplice.

Answer 1

di indirizzare la seconda voce

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

link JSFIDDLE

Answer 2

è necessario utilizzare il codice qui sotto Questo può essere un post a zero, perché utilizza JS. Tuttavia sembra essere solo l'opzione in questo caso. Non volevi usare JS, che capisco. Ma, per quanto nessuno viene fornito con i CSS unica soluzione, almeno prendere in considerazione questo: 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) 
}); 

e poi basta aggiungere .notEmptyAndEven di selezione e le regole CSS necessari.