Understand the css pseudo-class selector in 5 minutes: is :not

This article introduces the Css pseudo-classes: is and :not, and explains the relationship between is, not, matches, and any

:not

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

The above is MDN’s explanation of not

Recommended learning:CSS video tutorial

We should be able to have a general understanding of it from the name alone. Non-selection, exclude other elements in brackets

The simplest example, use CSS will change the font color of the div to blue without changing the html, except for the P tag.

<div>
    <span>我是蓝色</span>
    <p>我是黑色</p>
    <h1>我是蓝色</h2>
    <h2>我是蓝色</h2>
    <h3>我是蓝色</h3>
    <h4>我是蓝色</h4>
    <h5>我是蓝色</h5>
</div>

Previous practice

div span,div h2,div h3, div h4,{
  color: blue;
}

not writing method

div:not(p){
  color: blue;
}

From the above example, you can clearly understand the role of the not pseudo-class selector

Let’s upgrade it, ask: except span and p in the div, change the other font colors to blue

div:not(p):not(span){
  color: blue;
}

There is a more concise method, as follows, but the compatibility is not very good at present. It is not recommended to use

div:not(p,span){
  color: blue;
}

Compatible

Except IE8, all major browsers currently support it , you can use it with confidence

:is

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

The above is MDN’s explanation

Before saying is, You need to first understand the relationship between matches

matches and is?

matches is the past life of is, but it is essentially the same thing, and its usage is exactly the same.

The meaning of the word matches matches its function very well, but it has the exact opposite function of not. As not On the opposite side, matches looks really out of place this time, and the words are not concise enough, so it was renamed. There is also an issue https://github.com/w3c/csswg-drafts/issues/3258, which is the source of its name change.

Okay, now we know that matches and is are actually the same thing, so how is is used?

Example: Make the p tag under header and main turn blue when the mouse hovers over it

<header>
  <ul>
    <li><p>鼠标放上去变蓝色</p></li>
    <li><p>鼠标放上去变蓝色</p></li>
  </ul>
  <p>正常字体</p>
</header>
<main>
  <ul>
    <li><p>鼠标放上去变蓝色</p></li>
    <li><p>鼠标放上去变蓝色</p></li>
    <p>正常字体</p>
  </ul>
</main>
<footer>
  <ul>
    <li><p>正常字体</p></li>
    <li><p>正常字体</p></li>
  </ul>
</footer>

Previous practice

header ul p:hover,main ul p:hover{
  color: blue;
}

is writing method

:is(header, main) ul p:hover{
  color: blue;
}

From the above example, you can probably see the influence of is, but it does not fully reflect the power of is. However, when you select more content, especially those with more levels, you will find that there are many ways to write is. To be concise, take an example from MDN and look at the previous writing method of

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 20px;
}

is writing method

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}

It can be seen that as the nesting level increases, the advantage of is becomes more and more It’s becoming more and more obvious

After talking about is, we must get to know any. As mentioned earlier, is is the replacement of matches.

What is the relationship between any and is?

Yes, is is also a substitute for any. It solves some of the disadvantages of any, such as browser prefixes, selection performance, etc.

any has exactly the same function as is, the only difference is The only thing is that it needs to be added with a browser prefix. The usage is as follows

:-moz-any(.b, .c) {
}
:-webkit-any(.b, .c) { 
}

Conclusion

The above introduction roughly describes the relationship between the css pseudo-classes is, not, matches, and any

is not combination is the general trend

This article comes from PHP Chinese website, CSS tutorial column, welcome to learn

The above is the detailed content of Understand the css pseudo-class selector in 5 minutes: is :not. For more information, please follow other related articles on the PHP Chinese website!