CSS immediate child selector

Question

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

The <h1> tag is visible while the below yui-ge div tag is hidden. If > only applies to immediate children how come my yui-ge is having the above CSS applied to it (both in Chrome and Firefox).

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

update

Look here: --LINK REMOVED--

Click the "Woot" tab.... no results are shown on the default woot tab - they remain hidden.

Answer 1

You have this CSS rule:

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

This rule applies to all DIVs inside the #main element, that do not have the classes sites or default and are children of a .woot element.

Your structure is:

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

As you can see, the .yui-ge DIV does not have the class sites nor default and it is inside a .woot element. Therefore, it will be hidden.

---

The problem is that you have two DIVs in the ancestor chain that have the class woot.