Question

I came across this certain piece of code, and didnt get it.

1>

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{}

2>

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly{}

And here is the html code:

<ul id="nav">
    <li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#" id="products" class="top_link"><span class="down">Products</span></a>
        <ul class="sub">                
            <li><a href="#" class="fly">Cameras</a>
                <ul>
                    <li><a href="#">Nikon</a></li>
                    <li><a href="#">Minolta</a></li>
                    <li><a href="#">Pentax</a></li>
                </ul>
            </li>

            <li class="mid"><a href="#" class="fly">Lenses</a>
                <ul>
                    <li><a href="#">Wide Angle</a></li>
                    <li><a href="#">Standard</a></li>
                    <li><a href="#">Telephoto</a></li>
                    <li><a href="#" class="fly">Zoom</a>
                        <ul>
                            <li><a href="#">35mm to 125mm</a></li>
                            <li><a href="#">50mm to 250mm</a></li>
                            <li><a href="#">125mm to 500mm</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Mirror</a></li>
                </ul>
            </li>

            <li><a href="#">Flash Guns</a></li>
            <li><a href="#">Tripods</a></li>
            <li><a href="#">Filters</a></li>
        </ul>
</li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">Services</span></a>
        <ul class="sub">
            <li><a href="#">Printing</a></li>
            <li><a href="#">Photo Framing</a></li>
            <li><a href="#">Retouching</a></li>
            <li><a href="#">Archiving</a></li>
        </ul>
  </li>

</ul>

---

Can someone tell me what areas are addressed in the above 2 css code blocks ?

Thanks

Answer 1

I’d say it’s the original developer, and not you, who’s not getting it.

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul {

}

There’s no element matched by #nav li:hover li:hover li:hover li:hover ul ul that isn’t already matched by #nav ul. The same can be said about the other set of selectors.

A comma separated list of selectors, in CSS, means, “apply this for all elements that match any of these criteria”.

Now, for both examples, the top selector will also match any element that is matched by any of the subsequent selectors, making them all redundant. The following selectors are exclusively of increasing specificity.

If there were different CSS blocks following each selector, then the code would make sense, althought it’d be rather ugly. I’m guessing that this is based on code that used different styles in different levels of tree (to control text indent, say), which was then refactored to code that can be the same for all selectors.

Somebody then realized that, since the styles in each block are the same, all the selectors can be combined, but didn’t realize that the code could be refactored even further, to simply #nav ul { ... }

I’m guessing that the empty blocks { } actually had some styles in them, that you left out, for readability? Of course, if they were completely empty, as in your example, it’d be safe to remove the selectors entirely.