Better way to select a child menu item selector in CSS

Mohamed Meligy

First, you don’t need the ul before the ID, because the ID is unique enough, but it’s arguable for readability for you, etc..

Of course also you can remove the >ul, but I assume you added it consciously to be specific, and in CSS, it’s “safer” (while “better” is arguable) to be more specific than generic.

Then, assuming you don’t change your markup (with extra class or so), I think this is the right way. There is redundancy and such I completely agree. This is an inherited problem in CSS. You can’t solve it with CSS itself. You live with it, or you look for something that doesn’t have the problem to generate CSS for you.

In my current project, I’m using LESS CSS, this is a syntax very similar to CSS, and generates actual CSS files via a command prompt (or a Visual Studio extension called, well, LessExtension, which generates on save). There is also JS file for generation in the browser.

Check it out. I bet you’ll like it. You can take your CSS file as is, and start adding benefits.

http://lesscss.org

You selectors in LESS would be:

#menu-navigation {
    li>ul li a {
        /* some Anchor styles */

        &:hover {
            /* some Anchor hover styles */
        }
    }
}

Of course you can also have middle nesting levels as well. Here I did all li>ul li a one selector instead of multiple nesting levels for simplicity, but normally I’d make each of them a nesting level.