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