Widely available Supported across all major browsers. Safe to use in production.

: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.

Note: Originally named :matches() (and :any()), this selector was renamed to :is() in CSSWG issue #3258.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:is
88
88
78
14
88
14
forgiving selector list

Support for forgiving selector list
88
88
82
14
88
14
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • Previously available under a different name: :-webkit-any() (12)
  • Doesn't support combinators.
Notes 2 item(s)
Implementation note
  • Previously available under a different name: :-webkit-any() (79)
  • Doesn't support combinators.
Notes 3 item(s)
Implementation note
  • Previously available under a different name: :-moz-any() (4)
  • Doesn't support combinators.
  • See bug 906353.
Notes 3 item(s)
Implementation note
  • Previously available under a different name: :matches() (9)
  • Previously available under a different name: :-webkit-any() (5)
  • Doesn't support combinators.
Notes 2 item(s)
Implementation note
  • Previously available under a different name: :-webkit-any() (18)
  • Doesn't support combinators.
Notes 3 item(s)
Implementation note
  • Previously available under a different name: :matches() (9)
  • Previously available under a different name: :-webkit-any() (5)
  • Doesn't support combinators.

Syntax

CSS 
/* Traditional */
header a:hover,
nav a:hover,
footer a:hover {
  color: blue;
}

/* Using :is() */
:is(header, nav, footer) a:hover {
  color: blue;
}

Live demo

Multipleelement. unified

:is() selector Multipleelement. unified demo.

PreviewFullscreen

heading. unifiedstyle

:is() selector heading. unifiedstyle demo.

PreviewFullscreen

nestedcondition

:is() selector nestedcondition demo.

PreviewFullscreen

Use cases

  • Using :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.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links