Gizli öğe atlayarak nth-child öğesini seçme

Question

Çocuk sayısı bakımından gizli öğeleri yok saymak için yalnızca bir CSS (JS) yolu arıyorum. Mümkün mü?

ben bu HTML var:

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

ben boş değil her saniye galeri öğesini hedeflemek çalışıyorum ama bu olmuyor:

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

JS'yi kullanmak istemiyorum çünkü burası çok fazla kesme noktası olan karmaşık bir sitedir ve bu temel için bir şeyleri dinleyen dinleyicilere eklemek istemiyorum. o JS kullanması nedeniyle

Answer 1

Sen, bu sıfır sonrası olabilecek Bağlantısı JSFIDDLE

Answer 2

ikinci et

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

hedef kodunun altına kullanmalıdır. Ancak bu durumda sadece seçenek gibi görünüyor. Anladığım JS'yi kullanmak istemedin. Ama bildiğim kadarıyla hiç kimse CSS tek çözüm ile geliyor, en azından bu göz önünde bulundurun: o 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) 
}); 

ve sadece .notEmptyAndEven seçici ve ihtiyacınız CSS kurallarını ekleyin.