CSS nth-match doesn't work

Question

nth-match is supposed to work in jsfiddle following way

:nth-match(even of p,h3) {text-decoration: underline;}

this should underline every second p and h3 elements. But, it doesn't work - neither in FF nor in Chrome:

http://jsfiddle.net/VUKQS/

Where's the problem?

no browser seems to support it yet http://css4-selectors.com/selector/css4/structural-pseudo-class/. See the `Browser support` section below — LostInComputer, Jan 16 '14 at 16:24
this is a very new CSS4 psuedoclass that is not really supported in any browsers yet. spec: http://www.w3.org/TR/selectors4/#the-nth-match-pseudo — Ennui, Jan 16 '14 at 16:32
changing the code in the example from the link above from @LostInComputer (css4-selectors.com/selector/css4/structural-pseudo-class) to the `nth-of-type` as shown below from @tomsullivan1989 (`p:nth-of-type`) created a working example in FF 26, Chrome 32 and IE9 — Phlume, Jan 16 '14 at 16:34

BoltClock · Answer 1 · 2016-07-27T03:31:35.540

Where's the problem?

The problem is that you're treating ideas and proposals in early-stage drafts as actual features, by using them with the expectation that they'd work at all, let alone across browsers. Review the status of the WD:

This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

Case in point: :nth-match() no longer exists. Well, at least not in that form anyway. Its functionality (that is, accepting a selector argument to match against) hasn't completely disappeared; instead it's been subsumed into :nth-child(), just two weeks after this question was originally posted. You can see this in the :nth-child() section of the latest ED.

This is because, like the traditional :nth-child(), it only matches elements among a set of siblings sharing the same parent. The old name implied a document-wide match, i.e. an author would expect the following to match, but the WD never says that:

:nth-match(even of p) { text-decoration: underline; }

<p></p>
<div>
  <p></p> <!-- This should not match -->
</div>

The old name is no longer in use, and your fiddle will likely never ever work in any browser. Additionally, there hasn't been a new WD since May 2013, so it should be considered obsolete.

With such major changes to the Selectors 4 specification still ongoing even as we speak, I would not expect any of the new features to be implemented in stone anytime soon.

And if that wasn't confusing enough for you, Safari 9 ships with this new version of :nth-child(), but its [release notes](https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW34) cite the WD and not the ED. Cue everyone scratching their head as they click the link to the WD and try to figure out what's different from the current version. — BoltClock, Jul 27 '16 at 03:37

tomsullivan1989 · Accepted Answer · 2014-01-16T16:42:10.590

8

CSS4 selectors don't have much browser support at the moment, see here.

You could use nth-of-type, a CSS3 selector that has greater browser support (see here):

p:nth-of-type(even) {text-decoration: underline;}

DEMO

edited Jan 16 '14 at 16:42

answered Jan 16 '14 at 16:26

tomsullivan1989

2,760
14
21

1

thank you, interesting link. I am not interested in `nth-of-type` but thanks. – Tomas Jan 16 '14 at 16:54
@Tomas why wouldn't you be interested in `nth-of-type` if it does what you want? Or are you simply testing CSS4 psuedoclasses for current browser support? – disinfor Jan 16 '14 at 17:19
1

How does this not do exactly the same as your `nth-match` example? – tomsullivan1989 Jan 17 '14 at 09:07
@Tomas what do you mean it doesn't? As @tomsullivan1989 said, it does exactly the same thing as your `nth-match` example. – disinfor Jan 20 '14 at 15:33
@disinfor, I mean, `:nth-of-type` doesn't do what I want. I accepted this answer because it said that its CSS4 and not supported yet. Anyway I thought `:nth-match` does something little different, but it doesn't. – Tomas Jan 20 '14 at 16:08
2

I think the confusion stems from the fact that the code in the fiddle doesn't match the code presented in the question. In the fiddle, the selector given is `:nth-match(even of p)`, which is indeed functionally equivalent to `p:nth-of-type(even)`. However, in the question, the selector is `:nth-match(even of p, h3)`, which is *not* equivalent. Consider a div that has children in the following order: `p + h3 + p + h3` - the selector `:nth-match(even of p, h3)` will only match the two h3 elements, but neither of the p elements. – BoltClock Jan 14 '16 at 14:52
BoltClock got it. I was planning to use `:nth-match` for fancier purposes. The code I presented wasn't the actual goal, just a test code to prove that this selector doesn't work. – Tomas Feb 15 '16 at 09:49

AfromanJ · Answer 3 · 2014-01-16T17:00:18.870

3

I've been searching around and it seems that the CSS4 selector :nth-match does not have much support (if any).

You can test this here: http://css4-selectors.com/browser-selector-test/

Note: Here is the w3.org documentation on the :nth-match pseudo-class.

edited Jan 16 '14 at 17:00

answered Jan 16 '14 at 16:30

AfromanJ

3,922
3
17
33

2

This selector is no longer in existence (see BoltClock's answer). It's been superseded by `nth:child()`. – TylerH Jan 14 '16 at 16:02
@TylerH are you sure? it's in the working draft here: https://www.w3.org/TR/selectors4/#nth-match-pseudo – callum Jun 13 '16 at 13:49
@callum Yes. Did you read my comment? BoltClock's answer above explains in detail about it. The WD you've linked is from May 2013. The ED (a more frequently updated version) from *yesterday* shows `:nth-child()`: https://drafts.csswg.org/selectors/#child-index – TylerH Jun 13 '16 at 14:07

CSS nth-match doesn't work

3 Answers3

Linked