Learn more about :is() and :where() in CSS to make your style code more concise!

This article will give you an in-depth understanding of two more efficient selectors in CSS. Through them, you can use less code to select elements more effectively, thereby simplifying the code. Let’s take a look!

When newcomers get started with CSS, they are often most confused by two things (personal thoughts): 1. CSS is based on document flow, and sometimes the code written is Not in line with my expectations! 2. Complex selectors, which selectors should be used in different scenarios, and the selectors are too long, which makes newcomers very confused. Such a piece of code was recently discovered in the company's code.

.home .col .card a i.i1,
.home .col .card a i.i2,
.home .col .card a i.i3,
.home .col .card a i.i4,
.home .col .card a i.i5,
.home .col .card a i.i5,
.home .col .card a i.i6,
.home .col .card a i.i7 {
  background-size: 35px;
  width: 60px;
  height: 42px;
  margin: auto;
}

At first glance, there are really many. As a handover person, I was really stunned. It is too long.

You can use your little brains and try different solutions to simplify the abbreviation of this code!

In this article, we will talk about CSS3’s more efficient selectors, ensuring eye-catching selectors.

:is

Use less code to select elements more efficiently! 666, awesome! ! !

To put it simply, it is to simplify the code by extracting common selectors!

Note: :is() original name :match()

Example 1. Global:is

Scenario: During front-end development, a certain In some cases, the text color may be consistent in different divs.

For example, in the three divs below, the text colors of the three divs are all red.

    <div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>

    </div>
    <div class="div3">
        <p>p3</p>
    </div>

Junior version (novice)

For many novices, the following writing method will indeed appear: set the same p for different divs.

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

Advanced version

As the number of code written increases, novices gradually discover that there are many common codes that can be extracted. For example, color:red here can be extracted. Wow, the code has been reduced a lot instantly! ! !

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

Advanced version (:is)

At this time, the novice felt that since color:red; can be raised, why not p? So the following more concise version appeared.

:is(.div1,.div2,.div3) >P {
  color:red;
}

Example 2 Specific element: is

Look at the following code, we want to realize that the color of the div is red, and the color definition is in textColor, and keep p black.

<div class="textColor">
        p1
</div>
<div class="textColor">
    p2
</div>
<div class="textColor">
    p3
</div>
<p class="textColor">p4</p>

After reading Example 1 above, I guess some novices will start writing like this: directly add new styles to the p tag.

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
<p class="textColor pColor">p4</p>

However: is supports the writing method of specific elements: you only need to add

div:is(.textColor) {
    color:red;
}

multiple:is

div:is(.textColor) :is(h1,h4){
  color:red;
}
<div class="textColor">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
</div>

in front of:is

Weight

: The weight of is is determined by the provided id, element and other selectors; it may be difficult to understand. An example will make it immediately clear.

<ol id="olID">
    <li>li1</li>
    <li>li2</li>
</ol>

Let’s change the font color of li.

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

You can guess what color it is.

is blue: Why? First, the parameter of is is ol, which is consistent with the weight of the ol selector below. And because blue is at the bottom, the browser automatically uses blue to cover red.

Look at the writing below, we add an id to the is parameter: #olID, and the final color is red. This is because is uses a higher weight id selector.

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }

:where

:The syntax parameters of:where and :is are exactly the same. The only difference is that the weight of where is always 0, or the most humble. Still the same example above.

<ol id="olID">
  <li>li1</li>
  <li>li2</li>
</ol>

Here we are:

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

The final result is blue

Application scenario

Because I have to say , since you have is, why do you need :where? Personally, I think: where is still very useful. For example, when developing a component library, it can be used, because the weight of where is very low, so it is easy for users to cover it, and there is no need for anything! imprtant, v-deep and the like.

PS: The little chestnuts in the preface can be optimized

Original address: https://juejin.cn/ post/7005366966554722312

Author: Front-end picker

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Learn more about :is() and :where() in CSS to make your style code more concise!. For more information, please follow other related articles on the PHP Chinese website!