Shorten the comma separated CSS selectors

Question

Hi all

Maybe the title of this question is ambiguous, what I really mean is:

#footer_list li a:link, #footer_list li a:visited
{
    blah balh blah
}

Is there a shortcut for the two elements in CSS? so the CSS selectors can be shortened

Answer 1

Sure. If you give them each their own respective class/id names. But thats unnecessary. The code you have is perfectly acceptable, as CSS is Cascading Style Sheets, the rules cascade down essentially.

Answer 2

Your code is fine as is. I've been styling my sites with selectors like that and it hasn't bothered me or the browsers.

If your server runs Ruby and you don't mind picking up a server-side "extension" to the standard CSS syntax, LESS provides nested rules so you can do something like this:

#footer_list li {
    a:link {
        /* Styles for normal links */
    }
    a:visited {
        /* Styles for visited links */
    }
}

---

OK, I'm not sure what differences this will make, but I'm sure it'll be treated differently by browsers:

#footer_list li a {
    /* Styles */
}

You can then place additional a selectors with classes or a:hover or a:active below that and they'll work when applicable.

Answer 3

Do you have links within #footer_list that aren't within li elements? Do you have any other lists within your footer?

I'm imagining you have something like this in your markup:

<div id="footer">
    <p>&copy; me 2010</p>
    <ul id="footer_list">
        <li><a href="/home">Home</a></li>
        <li><a href="/contact">Contact</a></li>
        <li>....
    </ul>
    <p>Some other text...</p>
</div>

In this case your rule only needs:

#footer a:link, #footer a:visited

If you do (or might later) have links outside the ul which you want to style differently you could do:

#footer_list a:link, #footer_list a:visited