Reputation: 2917

What does this css code mean?

I came across this certain piece of code, and didnt get 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{}

#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

Upvotes: 0

Answers (3)

Gergely Fehérvári

Reputation: 7941

the firat and the seconds also like a query they select items inside an item

the comma separator allows you to add the same style for separated groups the only space allows you to seek after shildrens in the node and the style specified for the node in the parent

ul

this saysyou select every UL tag

ul li

this says you select only the li tags contained within an UL tag

ul li a

this says you select only the a tags wich contained in a specified li tgas which are contained in an ul tag this will not select the a tags which dont have li parent in any leaf. for example this will not select <body><a></a></body>

butthis will select the <ul><li><div><a></a></div></li></ul>

the :hover is a secified event trigger, which is called when you mouse over the item.

the # operator is says you search for an ID attributed tag the point . operator you search for an item wich attributed with the class stag

dont forget only one item has tha same id , cut couple of items can have the same class, and one item can have 2 or more different class

adding an id:

<div id="important-div"></div>

this mean the div is identificated with the important-div identificator you can fint this node with this name. like your credit card numer, no one has the same as you.

adding calssnames

<a class="clickable redborder nomargin"></a>

this means you a tag has 3 classname, you can add styles with the clickable class selector, and with the others also

Upvotes: 1

OrangeDog

Reputation: 38816

A <ul> that's a descendant of something with id="nav".

A <ul>that's a descendant of a <ul>, that's a descendent of a <li> that has the mouse over it, that's a descendant of something with id="nav".

Etc.

As pointed out, the first line already matches everything that the rest of it matches. Perhaps the child relationship (>) was meant rather than just descendent.

The second one is similarly redundant.

Upvotes: 1

David Hedlund

Reputation: 129832

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.

Upvotes: 8

What does this css code mean?

Answers (3)

Related Questions