Introduction of pseudo-class functions of where and: is in CSS

This article mainly explains "CSS: where and: is pseudo-class function introduction", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in-depth, together to study and learn "CSS: where and: is pseudo-class function introduction" it!

What is is and: where?

: is () and: where () are pseudo-class functions that help shorten and stop repetition when creating selectors. They all accept the parameter array of the selector (id, class, tag, etc.) and select any element that can be selected in the list.

This may not make much sense in how to help us write shorter selectors, so let's try: where () and: is ().

How to use: is and: where?

Where () can help us solve problems like this:

.btn span > a:hover, # header span > a:hover, # footer span > a:hover {...}

Into something like this.

: where (.btn, # header, # footer) span > a:hover {...}

And: is () can help add the same example to the example.

What's the difference between is and where?

: where () and: is () look and function the same, but one difference between them is that they have different particularities. Where () is simple, and its specificity is always 0, while the specificity of is () is the strongest selector.

What is CSS specificity (in short)?

There are four levels of specificity in CSS. Each level or category has a different score, and we can add all the scores to calculate the specificity of the selector.

The style of the element that has the largest number of selectors will be applied to that element, which is why sometimes when you write CSS, your style will not be applied and will be displayed as an underline in the development tool.

Specificity score:

The specificity of ID-- is 100.

Inline style-specificity score 1000

Elements and pseudo-classes-specificity score 1

Classes, pseudo-classes and attributes-specificity scores of 10, for example

For example:

Button.btn {color: red;} .btn {color: green;} .btn = 10 button.btn = 1 + 10 = 11

If we put the .btn class on the label, the text will turn red because the button.btn selector has a higher score than the .btn selector.

Thank you for your reading, the above is the content of "CSS: introduction of where and: is pseudo-class functions". After the study of this article, I believe you have a deeper understanding of the introduction of where and: is pseudo-class functions in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!