Grouping

When creating a style for a site, when multiple selectors are used at the same time, duplicate style rules may appear. In order not to repeat the same elements twice, they can be grouped for ease of presentation and abbreviation of the code. Example 17.1 shows the usual entry, here for each selector is given its own set of style properties.

Example 17.1. Style for each selector

H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333; } H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #900; } P { font-family: Times, serif; } 

From this example, you can see that the style for header tags contains the same font-family value. Grouping just allows you to set one property for several selectors at once, as shown in Example 17.2.

Example 17.2. Grouped selectors

 H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #003; } H2 { font-size: 135%; color: #333; } H3 { font-size: 120%; color: #900; } 

In this example, the font-family single for all selectors is applied to several tags at once, and individual properties are already added to each selector separately.

Selectors are grouped as a list of tags, separated by commas. The group can include not only tag selectors, but also identifiers and classes. The general syntax is as follows.

Selector 1, Selector 2, ... Selector N {Description of style rules}

With this entry, the style rules apply to all selectors listed in the same group.

Questions to check

1. What is the background color for an element with a button class when the given style is turned on?

 .bgzapas, .button, h1 { font-size: 1.2em; padding: 10px; background-color: #fcfaed; } .bgzapas { background-color: #e7f2d7; } .button, h2 { width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e; } .bgzapas, .button { background-color: #d9d7f2; } 

1. #fcfaed
2. # e7f2d7
3. # f3fced
4. # 5ca22e
5. # d9d7f2

Answers

5. #d9d7f2