Caniuse: CSS Level 4 Selectors (e.g. :scope with Element.querySelector)

[Fyrd]

CSS Level 4 Selectors

Available on site now:

• :placeholder-shown
• :in-range & :out-of-range
• :matches()
• :default
• :indeterminate
• case insensitive modifier
• selector list argument of :nth-child and :nth-last-child (replaced nth-match)
• :optional
• >> descendant combinator
• Selector list in :not()
• :has() (replaced Selector subject)
• :focus-within
• :dir() pseudo-class

• :read-only & :read-write

  Pending review:

• :any-link

  Not (yet) available:

• :scope (issue) (spec)

• :blank (issue) (spec)
• Grid structural combinators (column combinator) (issue) (spec)

---

This issue was imported from Google Moderator

Moderator votes: +18
Issue added by Jared J on 2014-04-17
To vote this issue up or down, simply include +1 or -1 in your comment.

[kaleb]

+1 I was hoping this worked in IE 11. It doesn't.

[nickleus]

+1
i'm mostly interested in explicitly choosing a compound selector as the "subject":
http://www.w3.org/TR/selectors4/#subject

[LDigital84]

+1

[Schweinepriester]

+1

[LPGhatguy]

I'd like to see this, especially for nth-match

[Schweinepriester]

also see http://www.sitepoint.com/future-generation-css-selectors-level-4/, especially :matches() :)

[Serator]

+1

[cvrebert]

+1

[jackwickham]

+1

[ccoenen]

I'd have looked up case-insensitive attribute matches (see http://www.w3.org/TR/selectors4/#attribute-case )

[stof]

+1

[roselan]

+1

[rajsite]

+1

[aronstrandberg]

+1 (nth-match especially)

[yukulele]

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ascope

[yukulele]

+1

[r-k-b]

+1
Would specifically like to see the upgraded :not negation selector that can take lists of simple selectors.

[vincentorback]

+1

[UnrulyNatives]

+1

[chaos986]

+1

[Llbe]

+1

[AdrianoCahete]

+1

[screeny05]

+1

[oriadam]

+1

[chharvey]

+1

[cvrebert]

• :matches() is now available at http://caniuse.com/#feat=css-matches-pseudo
• :default is now available at http://caniuse.com/#feat=css-default-pseudo
• :indeterminate is now available at http://caniuse.com/#feat=css-indeterminate-pseudo

[Fyrd]

case insensitive modifier is now available at http://caniuse.com/#feat=css-case-insensitive

[cvrebert]

(for others please add comment)

• :has() (#1268)
• :focus-within
• >> descendant combinator

Regarding some of the other items:

• Selector subject spec
• :nth-match spec

Neither of those is present in the current draft. I believe "Selector subject" was dropped in favor of :has(), and :nth-match was dropped in favor of http://caniuse.com/#feat=css-nth-child-of

[Fyrd]

@cvrebert Thanks! Have updated the list accordingly.

[Fyrd]

:optional now available at http://caniuse.com/#feat=css-optional-pseudo

[cvrebert]

(for others please add comment)

• :dir() pseudo-class
  
  
  
  • https://bugzilla.mozilla.org/show_bug.cgi?id=859301
  
  
  • https://bugs.chromium.org/p/chromium/issues/detail?id=576815
  
  
  • https://bugs.webkit.org/show_bug.cgi?id=64861
  
  

[di-ma-73]

+1

[Fyrd]

:focus-within now available at http://caniuse.com/#feat=css-focus-within

[Fyrd]

:dir now available at http://caniuse.com/#feat=css-dir-pseudo

[PunkSage]

:scope +1

[stevenvachon]

@Fyrd compound selectors in :not() is CSS4 too. Firefox currently doesn't support it for this reason, but Chrome and WebKit do.

[stevenvachon]

@nickleus selector subjects have been replaced with :has().

[cvrebert]

@stevenvachon Is that somehow different from http://caniuse.com/#feat=css-not-sel-list ?

[stevenvachon]

@cvrebert that refers to :not(.class1, .class2) where I'm referring to :not(.class1.class2).

[realprogrammer5000]

+1 Please!

[roastchicken]

+1

[boneyfantaseas]

+1 especially for :blank

[acdha]

:scope probably should be listed because it's supported by most of the non-Microsoft browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/:scope and that'd make it really easy for someone to miss that important caveat during development.

[franktopel]

What is the state of :scope?

[GreLI]

It worth noting that :empty has different meaning in CSS Level 4 Selectors — now it matches nodes containing only white-spaces. :blank has removed that meaning, and now it's proposed for empty inputs (at-risk).

[chharvey]

Pseudo-classes to add to this issue:

• Logical
  
  
  
  • [x] [:is()](https://caniuse.com/#feat=mdn-css_selectors_is)
  
  
  • [x] [:where()](https://caniuse.com/#feat=mdn-css_selectors_where)
  
  
  • [x] [:has()](https://caniuse.com/#feat=css-has)
  
  
• Location
  
  
  
  • [x] [:any-link](https://caniuse.com/#feat=css-any-link)
  
  
  • [ ] :local-link
  
  
  • [ ] :target-within
  
  
  • [x] [:scope](https://caniuse.com/#feat=mdn-css_selectors_scope)
  
  
• Time
  
  
  
  • [ ] :past
  
  
  • [ ] :current
  
  
  • [ ] :future
  
  
• Input
  
  
  
  • [ ] :intermediate
  
  
  • [x] [:blank](https://caniuse.com/#feat=mdn-css_selectors_blank)
  
  
  • [ ] :user-invalid
  
  
• Table
  
  
  
  • [ ] :nth-col
  
  
  • [ ] :nth-last-col
  
  

[kiding]

Many of them are actively being implemented, such as :is() selector. Currently only the MDN data is listed.

[dnknn]

:local-link