CSS derivation Selector

Core tip: by defining a style based on the context in which the element is positioned, you can make the tag more concise.

Derivation Selector

By defining a style based on the context in which the element is positioned, you can make the tag more concise.

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

The derivation selector allows you to determine the style of a label based on the contextual relationship of the document. By using the derivation selector rationally, we can make the HTML code cleaner.

For example, if you want the strong element in the list to become italic rather than the usual bold word, you can define a derivation selector:

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

Note the context of the blue code labeled <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 a italic character. 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, and the code is more concise without having to define a particular class or ID for the strong element.

Then look at the following CSS rules:

Strong {
color:red;
}

H2 {
color:red;
}

H2 Strong {
Color:blue;
}

The following is the HTML that it exerts influence on:

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