Selektoren werden benutzt, um diejenigen Elemente einer HTML-Seite auszuwählen, die von den Regeln beeinflusst werden sollen. Wenn mehrere Selektoren die gleichen Deklarationen teilen, können diese gruppiert werden um sich das mehrfache Schreiben einer Regel zu ersparen. Jeder Selektor muss durch ein Komma abgetrennt werden. They can also include a wide range of selectors. Beispielsweise:
h1, h2, h3, h4 { padding: 1em; }
.highlight p, .highlight ul { margin-left: .5em; }
#main p, #main ul { padding-top: 1em; }
Es gibt zwei häufige Fehler, die beim Gruppieren von Selektoren gemacht werden. Der erste ist, dass man vergisst, jeden Selektor auszuschreiben. Wenn man beispielsweise zwei Elemente innerhalb eines Containerblocks mit einer bestimmten ID selektieren möchte, könnte es durchaus sein, dass man beide in gleicher Weise darstellen möchte. Das nächste Beispiel ist deshalb nicht korrekt:
#maincontent p, ul { border-top: 1px solid #ddd; }
Der korrekt gruppierte Selektor würde wie folgt aussehen:
#maincontent p, #maincontent ul { padding-top: 1em; }
Der zweite häufig anzutreffende Fehler ist, dass man die gruppierten Selektoren mit einem Komma abschließt. Dies kann manche Browser dazu bringen, die Regel komplett zu ignorieren.
.highlight p, .highlight ul, { margin-left: .5em; }