CSS Advanced Grammar

Grouping selectors

You can group selectors so that grouped selectors can share the same declarations. Separate the selectors to be grouped with commas. In the following example, we have grouped all heading elements. All heading elements are green.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Inheritance and its problems

According to CSS, child elements inherit properties from their parent elements. However, it does not always work this way. Look at the following rule:

body {
     font-family: Verdana, sans-serif;
     }

According to this rule, the body element of the site will use the Verdana font (if the font exists in the visitor's system).

Through CSS inheritance, child elements will inherit the properties of the highest-level element (in this case, the body), such as p, td, ul, ol, ul, li, dl, dt, and dd. No additional rules are needed; all child elements of the body should display the Verdana font, and so should the child elements of child elements. And indeed, this is the case in most modern browsers.

But in those bloody days of browser wars, this might not always happen. Back then, support for standards was not a priority for businesses. For example, Netscape 4 did not support inheritance; it not only ignored inheritance but also ignored the rules applied to the body element. There were also related issues with IE/Windows until IE6, where font styles within tables would be ignored. What should we do then?

Be Kind to Netscape 4

Happily, you can deal with the issue that old browsers cannot understand inheritance by using what we call the 'Be Kind to Netscape 4' redundancy rule.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Browsers that are 4.0 or lower cannot understand inheritance, but they can understand group selectors. Although this may waste some bandwidth for users, it is necessary to do this if support is needed for Netscape 4 users.

Is Inheritance a Curse?

If you do not want the "Verdana, sans-serif" font to be inherited by all child elements, what should you do? For example, you want the font of the paragraph to be Times. No problem. Create a special rule for p so that it will break away from the parent element's rules:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }