JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Specifying Groups of Elements

It's often necessary to apply the same style rules to more than one element. You can either reiterate the rules for each element, or you can combine selectors and apply the rules in one fell swoop.

Figure 9.38. There is one h1 and two h2 elements.


To apply styles to groups of elements:

1.
Type selector1, where selector1 is the name of the first element that should be affected by the style rule.

2.
Type , (a comma).

3.
Type selector2, where selector2 is the next tag that should be affected by the style rule.

4.
Repeat steps 23 for each additional element.

Tips

  • This is nothing more than a handy shortcut. The rule h1, h2 {color: red} is precisely the same as the two rules h1 {color: red} and h2 {color: red}.

    Figure 9.39. You can list any number of individual selectors, as long as you separate each with a comma.

  • You can group any kind of selector, from the simplest (as shown in the example) to the most complex. For example, you could use h1, div.works p:first-letter to choose the level one headers and the first letter of the p elements in divs whose class is equal to works (!).

    Figure 9.40. Now both the h1 and the h2 elements will be colored red with a single rule.

  • It is sometimes useful to create a single style rule with the common styles that apply to several selectors and then create individual style rules with the styles they do not share. Remember that rules specified later override rules specified earlier in the style sheet (see page 122).



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→