How to use derived selector in CSS

Most people do not understand the knowledge points of this article "how to use derivative selectors in CSS", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use derivative selectors in CSS" article.

CSS derived selector

You can make tags more concise by defining styles based on the contextual relationship of elements in their locations.

In CSS1, selectors that apply rules in this way are called context selectors (contextualselectors) because they rely on context to apply or avoid a rule. In CSS2, they are called CSS derived selectors, but no matter what you call them, they serve the same purpose.

The CSS derived selector allows you to style a tag based on the context of the document. By using derived selectors properly, we can make our HTML code cleaner.

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

Listrong {font-style:italic; font-weight:normal;}

Note the context of the blue code marked:

I'm in bold, not italic, because I'm not on the list, so this rule doesn't work for me.

I am in italics. This is because the strong element is inside the li element. I am a normal font.

In the above example, only the style of the strong element in the li element is italic, and there is no need to define a special class or id for the strong element, so the code is more concise.

Take a look at the following rules for CSS derived selectors:

Strong {color:red;} h3 {color:red;} h3strong {color:blue;}

Here is the HTML it exerts its influence:

Thestronglyemphasizedwordinthisparagraphisred.

Thissubheadisalsored. Thestronglyemphasizedwordinthissubheadisblue. The above is about the content of this article on "how to use derivative selectors in CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.