CSS Advanced Syntax

Core tip: You can group selectors so that a grouped selector can share the same statement. Separate the selectors that need to be grouped with commas. In the following example, we grouped all the header elements. All the header elements are green.

Grouping of selectors

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

H1,h2,h3,h4,h5,h6 {
Color:green;
}

Inheritance and its problems

According to CSS, child elements inherit properties from the parent element. But it doesn't always work this way. Look at the following rule:

Body {
Font-family:verdana, Sans-serif;
}

According to the above rule, the BODY element of the site will use the Verdana font (if the font is present on the visitor's system).

With CSS inheritance, the child elements inherit the attributes (such as P, TD, UL, OL, UL, Li, DL, DT, and DD) of the top-level elements (in this case, the body). No additional rules are required, all child elements of the body should display the Verdana font, and the child elements of the child elements are the same. And in most modern browsers, it does.

But in the bloody years of the browser war, this was not necessarily the case, when support for standards was not a priority for companies. For example, Netscape 4 does not support inheritance, it ignores inheritance and ignores rules applied to the BODY element. Ie/windows until IE6 still has a related problem, the font style in the table is ignored. What should we do?

Friendly to Netscape 4

Fortunately, you can deal with the problem of legacy browsers that do not understand inheritance by using the redundancy rules we call "being Kind to Netscape 4".

Body {
Font-family:verdana, Sans-serif;
}

P, TD, UL, OL, Li, DL, DT, DD {
Font-family:verdana, Sans-serif;
}

4.0 browsers cannot understand inheritance, but they can understand the group selector. This can be a waste of some user bandwidth, but if you need to support Netscape 4 users, you have to.

Is inheritance a curse?

What if you don't want the "Verdana, Sans-serif" font to be inherited by all the child elements? For example, you want the paragraph font to be the times. No problem. Create a special rule for P so that it gets rid of the rules of the parent element:

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;
}