Selector comma:
When several selectors share the same declarations, they may be grouped together to save writing the same rule more than once.
Each selector must be separated by a comma.
Eg:
h1, h2, h3, h4 { padding: 1em; }
.highlight p, .highlight ul { margin-left: .5em; }
#main p, #main ul { padding-top: 1em; }
Common mistakes:
1. Forgetting to write each selector in full, when grouping selectors:
Eg: if you are trying to target two elements within the same containing block, and with the same ID, following is wrong:
/* incorrect */
#maincontent p, ul { border-top: 1px solid #ddd; }
It should be:
/* correct */
#maincontent p, #maincontent ul { border-top: 1px solid #ddd; }
2. Do not end the grouping with a comma:
Certain browsers will ignore the rule entirely:
.highlight p, .highlight ul, { margin-left: .5em; }
