The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

multiple selectors

  • # June 1, 2008 at 2:00 am

    I have noticed in stylesheets that people target many different selectors like this

    div#content ul li

    but when they target links they seperate with commas

    a:link, a:hover, a:active

    why the commas?

    # June 1, 2008 at 5:17 am

    This reply has been reported for inappropriate content.

    when there is no commas it will apply that style to the child in that exact order of coding. so for your example it will apply it to a list item in an unordered list within a div with id=content.


    here is a list:

    • first
    • second

    so the style will only be applied to the <li> tag, but the <p> tag will not have this style applied

    The commas serve to break the reading of the css so the same style can be applied to multiple tags with only one statement. So in your example a:link and a:hover and a:active will have the same style.

    # June 1, 2008 at 10:46 am

    This reply has been reported for inappropriate content.

    I think Adam had a pretty good explanation. In short, a comma separates two entirely different selectors. We just use them so we don’t have to write the same attributes twice.

    a { color: blue; }
    li { color: blue; }


    a, li { color: blue; }
    # June 1, 2008 at 7:25 pm

    ok thanks.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed