preface

CSS selectors are very common in practice, both in writing styles and selecting DOM elements in JS. In CSS Selectors Level 4, the working group continued to add richer Selectors to the selector standard. Let’s take a look.

:is()

:is is a pseudo-class that matches any element, simply by passing in a list of selectors. That is, the result of :is() is the selected element from the list of selectors passed in.

So what does this selector do? For example: I need to set different font sizes for different levels of h1 tags:

/* 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 {
  font-size: 20px;
}
Copy the code

We find that we need to write a long list to distinguish the h1 tags that cover different levels. In this case :is comes in handy. As mentioned earlier, :is represents the element selected from the parameter’s selection selector list.

/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
:is(section.article.aside.nav) h1 {
  font-size: 25px;
}

/* Level 2 */
section :is(section.article.aside.nav) h1 {
  font-size: 20px;
}
Copy the code

Is it a lot simpler all of a sudden? Is.

:is can also be directly viewed as a syntax sugar similar to a selection list, simplifying the writing process. The browser will automatically expand :is to the simplified form for parsing.

use:isNeed to pay attention to

  1. An unsupported selector was encountered

    Typically, browsers simply discard the entire rule when encountering an unsupported selector. For example, if the browser does not support :unsupported, :supported will not take effect.

    :supported.:unsupported {
    font-size: 12px;
}
Copy the code

    An unsupported selector in :is is the opposite, and :supported will still work correctly.

    :is(:supported.:unsupported) {
    font-size: 12px;
}
Copy the code

  2. The weight of the selector

    The weight of the is selector is determined by the selector with the highest weight in the list of selectors passed in

    :is(span.#id) {
    font-size: 12px;
}
Copy the code

    #id selector has a weight of (1, 0, 0), whereas span has only (0, 0, 1), So in the end to match the < span > < / span >, < div id = “id” > < / p >, < span id = “id” > < / span > is used (1, 0, 0) weights.

  3. Pseudo-elements cannot be used in :is

Browser Support

In CSS Selector Level 4, matches also supports a list of selectors (not), and matches is matched to a list of selectors (not). Matches was renamed to :is

:where()

The: WHERE selector is an unauthorized version of the: IS selector. As mentioned above, the weight of :is is determined by the highest weight of the selectors in the list, and the weight of: WHERE is not concerned with the weight of the selectors.

.class:where(#id) {
    font-size: 12px;
}
Copy the code

In the example above, the entire style rule has a weight of (0, 1, 0), and only.class contributes the weight value.

In the future, the: WHERE selector may support the option to specify a weight value

:scope

The :scope selector provides a reference point for subsequent selectors. In CSS, the default :scope stands for :root. When JavaScript is used to select elements, such as a querySelector call, it can be used to restrict the selector’s selection.

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>
Copy the code
var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0
Copy the code

As you can see, I only wanted to check.outer. Inner in.select. This is obviously not what I expected, so use :scope to solve this problem.

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; / / 0
Copy the code

:any-link

This selector is used to select all links that contain the href attribute, which in HTML5 contains the A, area, and link tags.

:local-link

:local-link and :any-link work in the same way, but :local-link has the added limitation that the absolute address to the link matches the domain name of the current page. In other words, if the href of a link is external, Will not be selected by :local-link.

:target-within

As we all know, the form of #anchor can be used in THE URL to let the browser locate to the anchor with id #anchor or name anchor. When an anchor is hit, we can use :target to select the element currently hit.

Now we have a scenario where I have a section container whose border needs to change color when an anchor hits. We can use target-within to select the section. That is, an element within the section must be selected by :target.

:focus-within

:focus-within has the same effect as :target-within, but it can only be selected if an element within the container is focused. That is, an element within the container must be selected by :focus.

:focus-visible

An element can only be selected by this selector if it is focused by :focus and the browser needs to display the focus effect on the element (such as the outer box shown by default when the browser input box is focused).

With this selector, you can use it to customize focusing styles.

:dir()

This selector is used to select according to the writing direction of the language, such as the common left-to-right writing :dir(LTR) for selection; Right-to-left writing can be selected using :dir(RTL). If the given value is AUTO, elements in LTR or RLT order are selected.

:blank

This selector is used to select elements whose input field value is empty.

:user-invalid

This selector is used to select input boxes that are not validated, such as those outside the Max and min ranges that are marked required but have a null value.

:indeterminate

This selector is used to select elements whose state is undefined. For example, in radio and checkbox elements, their values can be checked or unchecked, and their state is undefined if not explicitly set.

Time line correlation selector

The timeline selector is used for scheduling related functions, such as reading a timeline in a text reader or displaying WebVTT subtitles in video playback with video time.

:current()

The element that is currently being read by the reader or the caption that is being displayed.

article:current(p) {
    background: yellow;
}
Copy the code

:past()

Elements that have already been read or displayed.

:future()

The element to be read or displayed.

conclusion

By enriching the selector syntax, we can make it easier to select elements and style them in practice. It also avoids unnecessary hacks.

Refer to the link

  • Developer.mozilla.org/en-US/docs/…
  • www.w3.org/TR/selector…