Unexpected results form a coma in css

Hello all.
Run into this today and it surprised me a bit.

this works:


#pg2sidebar, li a {
color: #0645ad;
}

this did not:


#pg2sidebar li a {
color: #0645ad;
}

why did the coma made the diff. i would have thought that it would work for this:


#pg2sidebar, #whatever li a {
color: #0645ad;
}

But it didn’t, it only colored the text first id but not the second one. But the coma used on one id alone will work. This was unexpected.
D


#pg2sidebar, li a {
color: #0645ad;
}

That means: color the text inside #pg2sidebar, and (the text of) all <a>s inside <li>s.


#pg2sidebar li a {
color: #0645ad;
}

That means: color all <a>s inside <li>s inside #pg2sidebar.


#pg2sidebar, #whatever li a {
color: #0645ad;
}

That means: color the text inside #pg2sidebar, and all <a>s inside <li>s inside #whatever.

Oh, and get some rest. Getting into a coma from working with CSS means that you’re overexerting yourself.

Commas separate complete selectors.

This:


#pg2sidebar, li a {
color: #0645ad;
}

is the same as this:


#pg2sidebar,
li a {
    color: #0645ad;
}

which is the same as this:


#pg2sidebar {color: #0645ad;}
li a {color: #0645ad;}

Whereas this is only one (1) selector.


#pg2sidebar li a {color: #0645ad;}

This speculative example:


#pg2sidebar, #whatever li a {
color: #0645ad;
}

is the same as this:


#pg2sidebar,
#whatever li a {
    color: #0645ad;
}

which is the same as this:


#pg2sidebar {color: #0645ad;}
#whatever li a {color: #0645ad;}

Does this help?

Thank you all.
And especially ronpat for the extra clear explanation.
D

Thank you Frank! will go take a nap now that I know (actually watching strain on fx!)

You’re totally welcome Sherpa girl. :slight_smile:

[ot]Didn’t the Beach Boys write a song about you? (: :smiley:
(sounds like…)[/ot]