Hiding some but not all

HTML & CSS
1

Hello!

I’ve got some css that I’ll be using to hide certain links depending on the user. My css to do this looks like:

<style>
#menu-main {
display:none;
}
#menu-main.menu li.lms{
display:block;
}
</style>

Basically, I expect the code to hide everything with an id of menu-main, but not hide the list elements with a class of lms. My corresponding html looks like:


<ul id="menu-main" class="menu">
    <li class="lms"><a>Some Tools</a>
         <ul class="sub-menu">
             <li><a href="/somelink.php">Menu Item</a></li>
             <li><a href="/admin/add_instructor.php" >Do something</a></li>
         </ul>
    </li>
    <li><a>Other Tools</a>
        <ul class="sub-menu">
        <li><a href="/somewhere.php">Another menu item</a></li>
        <li><a href="/somewhereelse.php" >Do something else</a></li>
        </ul>
    </li>
</ul>

As written above, neither the Some Tools list item nor its subitems appear as expected. Any thoughts would be appreciated.

2

when you hide #main-menu all its children are hidden, regardless of their display value.

This should work (hide all <li>s but show the ones with class “lms”):


#menu-main li {
    display:none;
}
#menu-main .lms {
    display:block;
}

PS. Don’t overdo it with selectors, there is only one #menu-main, so you can just use that in css, no need to also add .menu to it, that just forces the browser to do an additional check for nothing. Similarly, since all items with class “lms” are <li>s (right?) there is no need to define li.lms, but just .lms

3

Thanks! That almost did it for me. The problem, however, is that:

<li><a href="/somelink.php">Menu Item</a></li>
 <li><a href="/admin/add_instructor.php" >Do something</a></li>

are still hidden and I need these guys to show as well. One solution that works is that I can just add a class of “lms” to each of these li’s. However, might there be a “cleaner” solution?

4

Right, my bad. Make that


#menu-main li {
    display:none;
}
#menu-main .lms,
#menu-main .lms li {
    display:block;
}
5

Perfect! Thank you for the additional bit of css.