When would these CSS properties be applied: ul#nav li.current a, ul#nav li:hover a?

Question

I'm a little confused as to when the properties are implemented between the ul#nav li:hover a and the first ul#nav li.current a. Is there supposed to be a comma there?

ul#nav li.current a, ul#nav li:hover a {
     background: #CCC;

   }

Answer 1

The CSS selectors you showed do the following: Set the background color of a to #CCC when a is in a <ul id="nav"><li> which is currently being hovered on or <ul id="nav"><li class="current"> .

<ul id="nav">
    <li class="current">
        <a href="#">This link will have it's background color set</a>
    </li>
    <li>
        <a href="#">This link will have it's background color set when hovered over the parent &lt;li&gt;</a>
    </li>
</ul>

The comma identifies that you want it to apply to both of the matches, and it is not one continuous match. If you remove the the comma, the a that will have it's background color set is expected to have the following structure: <ul id="nav"><li class="current"><a href="#"><ul id="nav"><li>

<ul id="nav">
    <li class="current">
        <a href="#">
            <ul id="nav">
                <li>
                    <a href="#">This link will have it's background color set when hovered over the parent &lt;li&gt;</a> 
                </li>
            </ul>
        </a>
    </li>
</ul>

I wouldn't really call the above a proper HTML structure but it may run in some (or all) browsers. Either way, the comma just allows you to have multiple selectors that will get the same properties assigned. Removing the comma makes it one selector which matches to the last example I gave.

Answer 2

Yes! if you want the current li element (activated) to have the same colour as others on hover.

 ul#nav li.current a, ul#nav li:hover a { background: #CCC; } 

 <ul id=nav> <li class=current><a>Home</a></li> <li><a>Work</a></li> <li><a>Contact</a></li> <li><a>Infos</a></li> </ul> 

No! if you want it to have a different colour

 ul#nav li:hover a { background: #CCC; } ul#nav li.current a{ background: red; } 

 <ul id=nav> <li class=current><a>Home</a></li> <li><a>Work</a></li> <li><a>Contact</a></li> <li><a>Infos</a></li> </ul>