Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

Selector groups

Browser support

Get browser support information for selector groups in the downloadable version of this guide or our browser support tables.

Explanation

The group selector is not really a selector, more a shorthand way of giving the same style properties to several types of element at once. You might want every heading to be in a particular font, even though individual heading levels will be different sizes.

This shorthand eliminates the tedium of recreating the same set of properties several times, with the attendant risk of mistake. It also makes for very efficient editing - if you want to change the font for all your headings you need only do it once, rather than for each individual level.

Syntax

A selector group is simply a list of selectors separated by commas. The contents of the list can be any selectors.

For example, a selector group that assigns the same font to each type of link (see pseudo class selectors) is:

a:link, a:visited, a:active, a:hover {font: Times serif}

Use

Selector groups are useful for ensuring that any sets of elements which you want to share the same properties in fact do so. By grouping like elements together you minimize the possibility of mistakenly assigning the wrong properties or values. It is also a useful time saver, both in initially setting the properties of an element, or when editing those properties, as repetition is minimized.