CSS derived Selector

Derived Selector

You can define a style based on the context of the element in its position to make the tag more concise.

In CSS1, the selectors that apply rules are called contextual selectors because they depend on context relationships to apply or avoid a rule. In CSS2, they are called derivative selectors, but whatever you call them, they all play the same role.

The derived selector allows you to determine the style of a tag Based on the context of the document. By properly using the derived selector, we can make HTML code more clean.

For example, if you want the strong element in the list to become italic, rather than the regular italic, you can define a derived selector as follows:

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

Note the context of the Blue Code marked as <strong>:

<P> <strong> I am in bold or not, because I am not in the list, this rule does not work for me </strong> </p>

<Ol>
<Li> <strong> I am a italic. This is because the strong element is located in the li element. </Strong> </li>
<Li> I am a normal font. </Li>
</Ol>

In the above example, only the style of the strong element in the li element is italic, and no special class or id needs to be defined for the strong element. The code is more concise.

Let's look at the following CSS rules:

Strong {
Color: red;
}

H2 {
Color: red;
}

H2 strong {
Color: blue;
}

The following is the HTML that it influences:

<P> The stronugly emphasized word in this paragraph is <strong> red </strong>. </p>
<H2> This subhead is also red. <H2> The stronugly emphasized word in this subhead is <strong> blue </strong>.