Display：none / Display：block与组合的同级选择器

Question

I am trying to make the sub-menu with class = "category-nav" only valid for the "color" option (so it should not exist or be displayed for any of the other options).

The display: none works but when I try to do display block using combined sibling selectors to specify displaying submenu only for the option "color" it does not work. (.add-nav #color ~ .category-nav {display:block}). What am I doing wrong? Is there another way to do this with css? I would prefer not to use JavaScript for this as the page is already JavaScript heavy.

<ul class="add-nav">
                            <li><a href="#">shape</a></li>
                            <li id = "color" class="active"><a href="#">color</a></li> 
                            <li><a href="#">pattern</a></li>
                            <li><a href="#">size</a></li>
                            <li><a href="#">overall</a></li> 
</ul>
                        <ul class="category-nav">
                            <li class="active"><a href="#">all</a></li>
                            <li><a href="#">Red</a></li>
                            <li><a href="#">Orange</a></li>
                            <li><a href="#">Yellow</a></li>
                            <li><a href="#">Green</a></li>
                            <li><a href="#">Blue</a></li>
                            <li><a href="#">Purple</a></li>
                        </ul>

Here's the css

.add-nav{
    width:100%;
    padding:0;
    margin:10px 0 0px;
    list-style:none;
    border-bottom:1px solid #cecece;
    display:table;
    text-transform:uppercase;
    font-size:10px;
    line-height:14px;
}
.add-nav li{
    text-align:center;
    display:table-cell;
    vertical-align:bottom;
}
.add-nav li a{
    display:block;
    padding:21px 5px 16px;
    color:#636363;
}
.add-nav li a:hover,
.add-nav .active a{
    font-weight:700;
    text-decoration:none;
    color:#272727;
    background:#f2f2f2;
}
.category-nav{
    padding:5px 13px 7px;
    margin:0 0 0px;
    list-style:none;
    background:#f2f2f2;
    width:100%;
    font-size:10px;
    font-variant:small-caps;
    display:table;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.category-nav li{
    text-align:center;
    display:table-cell;
    vertical-align:bottom;
}
.category-nav li a{color:#636363;}
.category-nav li a:hover{
        text-decoration:none;
    color:#ff6699;
}
\\.category-nav{
        display:none;\\
}
.category-nav .active a{
    color:#ff6699;
    font-weight:700;
}

Here is the code in JS Fiddle

Answer 1

What you are looking for is a CSS parent selector, which doesn't exist .

Your code says:

.add-nav li.active #color ~ .category-nav     // I added the .active class

What this actually does is select all siblings of #color that match .category-nav . Now, .category-nav is not a sibling of #color ; it's a sibling of .add-nav . What you really want to do is select siblings of .add-nav ... but only when it contains li.active #color . In other words, you want to define something, and then select, not the thing itself, but its parent. This isn't possible, and there is an interesting discussion on why it's not allowed here . Basically, that type of thing would introduce huge performance problems in a browser.

However, you already must be using some Javascript to apply the active class to each <li> in .add-nav when it's clicked on. It would only be a couple more lines of code to check which link is clicked and show/hide your .category-nav based on that. This is the best way to do it in my opinion.