CSS Derivation selectors

Derived selectors you can make the markup more concise by defining the style based on the context in which the element is located. In CSS1, selectors that apply rules in this way are called context selectors (contextual selectors), because they rely on context relationships to

Derived selectors

You can make the markup more concise by defining the style based on the context of the element in its place.

In CSS1, selectors that apply rules in this way are called context selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derived selectors, but whatever you call them, they work the same way.

A derived selector allows you to determine the style of a label based on the context of the document. By using derived selectors reasonably, we can make the HTML code neater.

For example, if you want the strong element in the list to become italic instead of the usual bold character, you can define a derived selector like this:

Li Strong {
Font-style:italic;
Font-weight:normal;
}

Note the contextual relationship of the blue code marked <strong>:

<p><strong> I'm bold, not italic, because I'm not in the list, so this rule doesn't work for me </strong></p>

<ol>
<li><strong> I am italic. This is because the strong element is inside the LI element. </strong></li>
<li> I am the normal font. </li>
</ol>

In the example above, only the strong element in the LI element is styled in italics, without defining a particular class or ID for the strong element, and the code is more concise.

Then look at the following CSS rules:

Strong {
color:red;
}

H2 {
color:red;
}

H2 Strong {
Color:blue;
}

Here is the HTML that it exerts influence on:

<p>the strongly emphasized word in this paragraph is<strong>red</strong>.</p>