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

:is()

The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.

Selectors

Overview

The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.

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 functional pseudo-class takes a selector list as its argument, and matches 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

Powered by web-features