:is() (:matches(), :any())
Quick Summary for :is
Note: :matches() was renamed to :is() in CSSWG issue #3258.
Code Usage for :is
/* Selects any paragraph inside a header, main    or footer element that is being hovered */ :is(header, main, footer) p:hover {   color: red;   cursor: pointer; }  /* The above is equivalent to the following */ header p:hover, main p:hover, footer p:hover {   color: red;   cursor: pointer; } 
More Details for :is

:is() (:matches(), :any())

Note: :matches() was renamed to :is() in CSSWG issue #3258.

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.

/* Selects any paragraph inside a header, main    or footer element that is being hovered */ :is(header, main, footer) p:hover {   color: red;   cursor: pointer; }  /* The above is equivalent to the following */ header p:hover, main p:hover, footer p:hover {   color: red;   cursor: pointer; } 

Pseudo-elements are not valid in the selector list for :is().

Note that older browsers support this functionality as :matches(), or through an older, prefixed pseudo-class — :any(), including older versions of Chrome, Firefox, and Safari. :any() works in exactly the same way as :matches()/:is(), except that it requires vendor prefixes and doesn't support complex selectors.

These legacy pseudo-classes can be used to provide backwards compatibility.

/* Backwards-compatible version with :-*-any() and :matches()    (It is not possible to group selectors into single rule,    because presence of invalid selector would invalidate whole rule.) */ :-webkit-any(header, main, footer) p:hover {   color: red;   cursor: pointer; } :-moz-any(header, main, footer) p:hover {   color: red;   cursor: pointer; } :matches(header, main, footer) p:hover {   color: red;   cursor: pointer; } 

Difference between :is() and :where()

The difference between the two is that :is() counts towards the specificity of the overall selector (it takes the specificity of its most specific argument), whereas :where() has a specificity value of 0. This is demonstrated by the example on the :where() reference page.

Forgiving Selector Parsing

The specification defines :is() and :where() as accepting a forgiving selector list.

In CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using :is() or :where() instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.

:is(:valid, :unsupported) {   ... } 

Will still parse correctly and match :valid even in browsers which don't support :unsupported, whereas:

:valid, :unsupported {   ... } 

Will be ignored in browsers which don't support :unsupported even if they support :valid.

Examples

Cross-browser example

<header>   <p>This is my header paragraph</p> </header>  <main>   <ul>     <li><p>This is my first</p><p>list item</p></li>     <li><p>This is my second</p><p>list item</p></li>   </ul> </main>  <footer>   <p>This is my footer paragraph</p> </footer> 
:-webkit-any(header, main, footer) p:hover {   color: red;   cursor: pointer; }  :-moz-any(header, main, footer) p:hover {   color: red;   cursor: pointer; }  :matches(header, main, footer) p:hover {   color: red;   cursor: pointer; }  :is(header, main, footer) p:hover {   color: red;   cursor: pointer; } 
let matchedItems;  try {   matchedItems = document.querySelectorAll(':is(header, main, footer) p'); } catch(e) {   try {     matchedItems = document.querySelectorAll(':matches(header, main, footer) p');   } catch(e) {     try {       matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');     } catch(e) {       try {         matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');       } catch(e) {         console.log('Your browser doesn\'t support :is(), :matches(), or :any()');       }     }   } }  matchedItems.forEach(applyHandler);  function applyHandler(elem) {   elem.addEventListener('click', function(e) {     alert('This paragraph is inside a ' + e.target.parentNode.nodeName);   }); } 

Simplifying list selectors

The :is() pseudo-class can greatly simplify your CSS selectors. For example, the following CSS:

/* 3-deep (or more) unordered lists use a square */ ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul, ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu, ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir, ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul, ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu, ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir, menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir, dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul, dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu, dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {   list-style-type: square; } 

... can be replaced with:

/* 3-deep (or more) unordered lists use a square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {   list-style-type: square; } 

Simplifying section selectors

The :is() pseudo-class is particularly useful when dealing with HTML5 sections and headings. Since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky.

For example, without :is(), styling all the <h1> elements at different depths could be very complicated:

/* 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; } /* Level 3 */ /* ... don't even think about it! */ 

Using :is(), though, it's much easier:

/* 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; } /* Level 3 */ :is(section, article, aside, nav) :is(section, article, aside, nav) :is(section, article, aside, nav) h1 {   font-size: 15px; } 

:is() does not select pseudo-elements

The :is() pseudo-class does not match pseudo-elements. So rather than this:

some-element:is(::before, ::after) {   display: block; } 

instead do:

some-element::before, some-element::after {   display: block; } 

Syntax

:is( <complex-selector-list> )

where <complex-selector-list> = <complex-selector>#

where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]

where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Specifications

Specification
Selectors Level 4 # matches-pseudo

See also

:where() - Like :is(), but with 0 specificity. Selector list Web components Select your preferred language English (US)EspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
The happiest People don't have the best of everything, they just make the best of everything.
Unknown
Random CSS Property

url()

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS functions, like the attr() function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.
<url> css reference