CSS Selector 'Precedence' Query

Question

I'm curious, what is the functional difference between the following snippets, if there is any? I am unsure how the ',' affects statements. Does the #page > affect link in the first eg?

#page > a:visited, a:link{}

and

#page > a:link{}
#page > a:visited{}

Related question: [Is there a reason to use a instead of a:link or a:visited in my stylesheet?](http://stackoverflow.com/questions/10587245/is-there-a-reason-to-use-a-instead-of-alink-or-avisited-in-my-stylesheet) — BoltClock, Mar 22 '15 at 04:37

score 2 · Answer 1 · answered Mar 21 '15 at 22:11

The , separates 2 different selectors so they have the same style definition.

No the #page > does not affect the selector after the ,

This:

#page > a:link{}
#page > a:visited{}

Could be expressed as:

#page > a:link,#page > a:visited{}

If they had the exact same styles

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

CSS Selectors - 5. Groups of selectors

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

In other words, #page > a:visited, a:link represents two separate, unrelated selectors.

Therefore the following:

#page > a:visited,
a:link {}

is not equivalent to:

#page > a:link {}
#page > a:visited {}

You would have to group the entire selector in order to yield the same results:

#page > a:link,
#page > a:visited {}

On a somewhat related side note, if you were using a CSS preprocessor, such as LESS, you could use:

#page > a {
    &:visited,
    &:link {
        color: red;
    }
}

Which would compile to the following:

#page > a:visited,
#page > a:link {
    color: red;
}

CSS Selector 'Precedence' Query

2 Answers2