CODEWITHSUNDEEP
csscss-selectors
Michael Mao
Michael Mao

Reputation: 10148

Shorten the comma separated CSS selectors

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

Upvotes: 7

Views: 3695

Answers (3)

robertc
robertc

Reputation: 75707

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

Upvotes: 0

BoltClock
BoltClock

Reputation: 723448

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.

Upvotes: 1

Russell Dias
Russell Dias

Reputation: 73282

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.

Upvotes: 5

Related Questions