Welcome Login

Grouping selectors


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.


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; }

Created on: Thursday, March 10, 2011 by Andrew Sin