सीएसएस तत्काल बच्चे चयनकर्ता

Question

#main .container > div:not(.sites):not(.default) { 
    display: none; 
} 

<h1> टैग दिख रहा है। अगर> केवल तत्काल बच्चों पर लागू होता है कि कैसे मेरे yui-ge पर उपरोक्त सीएसएस लागू होता है (क्रोम और फ़ायरफ़ॉक्स दोनों में)।

<div class='container'> 
    <div class='default selected'> 
     <h1>Page Title</h1> 
     <div class='yui-ge'> //for some reason, this tag remains hidden cause of the above CSS 
      //more div tags 
     </div> 
    </div> 
    //more HTML here 
</div> 

अद्यतन

यहाँ

देखो: --LINK REMOVED--

"Woot" टैब पर क्लिक .... कोई परिणाम नहीं डिफ़ॉल्ट woot टैब पर दिखाए जाते हैं - वे छिपा रहना ।

#main .woot > div:not(.sites):not(.default) { 
    display: none; 
} 

यह नियम #main तत्व के अंदर सभी DIVs, कक्षाएं sites या default की जरूरत नहीं है कि और एक .woot तत्व के बच्चे हैं पर लागू होता है:

Answer 1

आप इस CSS नियम है।

आपका संरचना होती है:

<div id="main"> 
    <div class="woot"> 
     <div class="woot default selected"> 
      <div class="yui-ge"> ... </div> 
     </div> 
    </div> 
</div> 

आप देख सकते हैं, .yui-ge div class sites है और न ही default नहीं है और यह एक .woot तत्व के अंदर है। इसलिए, यह छिपा होगा।

---

समस्या आप पूर्वज श्रृंखला वर्ग woot है कि में दो DIVs होता है।

Answer 2

यदि आप कोई तत्व छुपाते हैं, तो इसके सभी बच्चे तत्व भी छुपाए जाते हैं।