Cascading Style Sheets

Customizing Tags Depending on Context

A Motivational Example | Redefining The Tags | Including CSS Rules | Customizing Other Tags | Customizing Tags | Classes

We can also set up a css rule so that a customized version of a tag will be used only if the tag appears within the proper context. That is, the rule will only take effect when the tag to be reconfigured is nested within another specified tag (or is the innermost tag within an order of nesting that we specify).

As an example, we define the <B> tag one way if it is nested inside an <I> tag, but a different way if it is not inside the <I> tag: Example 8. This is how we define these two different rules for <B>:

The HTML file for Example 8 contains:

Notice how we specify the second css rule. As usual, the definitions of the rule are all contained inside a pair of braces. Also, as usual, the name of the tag to be customized is just outside these braces. But now the name of the tag that is to be customized is preceded by the name of another tag, the tag in which the tag to be customized must be contained. In this case, the rule will take effect only when the <B> tag appears (properly nested) inside the <I> tag. If we wish, we can require additional levels of nesting before a rule will be applied; we simply need to specify the required tag names, in the required order, before the name of the tag to be reconfigured in a rule. (The first tag listed in the rule is the outermost one in the nesting; the next tag in the list must be nested inside the first tag, etc. for the rule to take effect.)

For the fun of it, let's specify a new rule by simply reversing the context order of our previous rule and changing the values of a couple of properties: Example 8b.

Now we've specified a rule for the <I> tag that is used only when the <I> tag is nested inside a <B> tag. Notice the different effect in the two cases in the example. The example HTML file now contains:

These same principles hold for specifying contextual rules for other tags.