CODEWITHSUNDEEP
htmlcssperformancedrop-down-menucss-selectors
Sven
Sven

Reputation: 13275

CSS dropdown menu: What is the fastest selector?

I have a multi level navigation menu on my page consisting of an unordered list. That list has the class menu, like so:

<ul class="menu">
    <li><a href="#">Category 1</a></li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a>
        <ul>
            <li><a href="#">Subcategory 1</a></li>
            <li><a href="#">Subcategory 2</a></li>
        </ul>
    </li>
</ul>

The href attributes are set to # for illustration purposes.

My question is: What is the best Selector to use for that kind of menu regarding speed?

At the moment I am using something along these lines (again, just for illustration, there are rules missing):

.menu {
    background-color: #CCC;
}

.menu li {
    background-color: #FFF;
}

.menu li > ul li ul {
    background-color: #333;
}

Is a class the fastest selector in that case? Or should I use something like .navigation-container ul? Do you have any recommendations?

Upvotes: 2

Views: 420

Answers (2)

Guffa
Guffa

Reputation: 700192

Simpler selectors are faster than complex selectors. For example .menu is faster than .menu ul, but it's no dramatic difference.

What you have is fine. You could perhaps try to make the .menu li > ul li ul less complex, but don't expect to notice any difference, because you could perhaps shave off a millisecond or two on the rendering time.

Here is some reading about efficient CSS seletors: http://csswizardry.com/2011/09/writing-efficient-css-selectors/

Upvotes: 4

Daniel Schwarz
Daniel Schwarz

Reputation: 284

It's quicker to reference with an id, e.g. #menu, #menu li. I would also add an id to the sub ul tags too :)

Upvotes: 1

Related Questions