एनएच-चाइल्ड छिपाने वाले तत्वों का चयन

Question

मैं एनएच-चाइल्ड मायने में छुपे तत्वों को अनदेखा करने के लिए केवल एक सीएसएस (कोई जेएस) तरीका ढूंढ रहा हूं। क्या यह संभव है?

मैं इस 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) {}

मैं जेएस का उपयोग नहीं करना चाहता क्योंकि यह एक जटिल साइट है जिसमें कई ब्रेकपॉइंट हैं और मैं इस मूलभूत चीज़ के लिए श्रोताओं को ऑन्रेस नहीं करना चाहता हूं।

Answer 1

आप दूसरे मद

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

लिंक JSFIDDLE

Answer 2

लक्षित करने के लिए नीचे दिए गए कोड का उपयोग करना चाहिए यह एक शून्य पोस्ट किया जा सकता है, क्योंकि यह जे एस का उपयोग करता है। हालांकि यह इस मामले में एकमात्र विकल्प प्रतीत होता है। आप जेएस का उपयोग नहीं करना चाहते थे, जिसे मैं समझता हूं। लेकिन जहाँ तक कोई सीएसएस एकमात्र समाधान के साथ आता है, कम से कम इस पर विचार करें: 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 चयनकर्ता और सीएसएस नियम जोड़ें।