SoSLUG Archive

Grouping classes

Grouping class styles

If you want to assign the same formatting to multiple tags, for example:


you can group them thus:



This is an H2 heading

This is an H3 heading

Notice the comma between the tag names in the style sheet.

Descendant selectors

At times, you may may want selectors to match an element that is the descendant of another element in the document tree (e.g., “Match those EM elements that are contained by an H3 element”). A descendant selector is made up of two or more selectors separated by white space. A escendant selector of the form “A B” matches when an element B is an arbitrary descendant of some ancestor element A.

For example, consider the following rules:


This is very important

The intention of the em rule is to add emphasis to text by changing its
color, the effect will be lost in a case such as:

This headline is very important

This can be fixed by using a descendant selector. this rule
sets the text color to red whenever an EM occurs anywhere within an H3 tag.


This headline is very important

This heading is very important

The third rule will match this particular case to overcome the problem.

Notice the absence of a comma between the tag names in the style sheet. This makes the difference between grouping tags and descendant tags.

Author: Alan Campion - Page reference: 2993
Last modified: Alan Campion - 2011-09-05