The pseudo-classes :is() and :where().
Summary of characteristics of the :is() selector
Description of pseudo-classes :is() and :where().
The pseudo-class :is() has replaced :any() and :matches() in the specification.
These two terms had been proposed by different browsers, but are now obsolete.
These two pseudo-classes aim to simplify writing selector combinations by behaving a bit like an OR.
The difference between :is() and :where() lies in the level of priorities.
A list of selectors is indicated in the parentheses of :is(), to designate the elements that match any of the listed selectors.
For example, :is(h1,h2,H3) designates all h1, h2, and h3 headings. In such a simple case, it would have
been easier to simply write h1,h2,H3.
But when there is a combination of several selectors, :is() often allows for a shorter writing. For example, to designate the h1,
h2, and h3 elements that are included in the #edito element, the writing without using :is() is as follows:
#edito h1, #edito h2, #edito h3 { ... }
Ce qui peut se simplifier en utilisant la pseudo-classe :is() :
#edito :is(h1,h2,h3) { ... }
Pseudo-elements cannot appear in the selector list. The following syntax is therefore incorrect:
#edito :is(h1::first-letter, h2::first-letter) { ... } Incorrect
The list of selectors is said to be "forgiving", which means that if the syntax of some of the selectors is not recognized, it does not invalidate the
entire expression: the unknown selectors are simply ignored, :is() then works with only the selectors that have been recognized.
Note: several browsers had developed an equivalent feature but with different syntaxes, such as the pseudo-classes :any() and :matches().
Since these syntaxes have not been standardized by the W3C, it is strongly discouraged to use them.
Calculation of the specificities of :is() and :where().
The specificity of a selector is an important concept that determines which rule will be used in case of conflict. Refer to the page on Priorities to find out how contradictions are resolved.
The only difference between these two pseudo-classes is their specificity :
- The specificity of
:is()is that of the most specific selector among those listed in the list. - The specificity of
:where()is zero.
Example of use of the pseudo-class :is().
Example 1.
Set a border for images that are contained in a table, whether in regular cells td or in header cells th:
Syntax using :is():
:is(td,th) > img {
border:1px solid;
}
Equivalent syntax without using :is():
td > img, th > img {
border:1px solid;
}
Example 2.
Distinguish the first letters of h1 to h4 titles with a different color and a larger font size:
:is(h1,h2,h3,h4)::first-letter {
color:blue;
font-size:2em;
}
Syntaxe équivalente sans utiliser :is():
h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter {
color:blue;
font-size:2em;
}
Example 3: ensure compatibility with old browsers.
To ensure compatibility with browsers prior to 2021, it is necessary to multiply the syntaxes by adding the prefixes specific to each browser.
| Text in a table cell | Other text | Third text |
Browser compatibility with :is().
The pseudo-class selector :is() is just beginning to be well recognized by current browsers. It must be said that the standard took a long time
to decide between the browser proposals, which had all chosen different syntaxes like :matches() or :any().
These should no longer be used.
The second and fourth columns of the table below indicate whether the list of selectors is forgiving, that is, whether a syntax error on one of the selectors does not invalidate the entire list.
:is() pseudo-class, which replaces the :matches() and :any() pseudo-classes.:is() pseudo-class with a forgiving list of arguments.:where() pseudo-class, which targets elements matching multiple selectors.:where() pseudo-class with a forgiving selector list.Notes:
(1) On QQ Browser, support for :is() can be enabled with the experimental flag.
:is()pseudo-class
:is()pseudo-class
forgiving selectors list
:where()pseudo-class
:where()pseudo-class
forgiving slectors list
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Opéra
Safari sur IOS
Firefox
Firefox pour Androïd
Chrome
Edge
Androïd Brower
Chrome pour Androïd
KaiOS Browser
Opéra mini
Historic of the :is() pseudo-class.
-
Selectors Level 4
Regarding:is(). Introduction of the pseudo-classes:is()and:whereat this level of the specification.
September 29, 2011Working Draft.
Other pseudo-classes grouping selectors.
Here is an excerpt of the selectors presented in the specification module Selectors . We have retained only the pseudo-classes that are used to group other selectors.
