CSS nth-match doesn’t work

by

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.

More Related Contents:

  1. CSS Pseudo-classes with inline styles
  2. Why do browsers match CSS selectors from right to left?
  3. Why doesn’t nth-of-type/nth-child work on nested elements?
  4. How can I style even and odd elements?
  5. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  6. Several elements with the same ID responding to one CSS ID selector
  7. Is there a CSS selector for the first direct child only?
  8. How to target a specific column or row in CSS Grid Layout?
  9. CSS :selected pseudo class similar to :checked, but for elements
  10. CSS selector by inline style attribute
  11. :last-child not working as expected?
  12. Difference in applying CSS to html, body, and the universal selector *?
  13. A CSS selector to get last visible div
  14. :not(:empty) CSS selector is not working?
  15. How to exclude particular class name in CSS selector?
  16. CSS selector with period in ID
  17. CSS select elements with partial id
  18. Can a dynamic class be styled using CSS? [duplicate]
  19. Select first occurring element after another element
  20. CSS selector for empty or whitespace
  21. Default :target with CSS
  22. Is it possible to use CSS vars in CSS3 selectors?
  23. Select second last element with css
  24. How do I give a CSS class priority over an id?
  25. How to run the CSS3 animation to the end if the selector is not matching anymore?
  26. Is there a css selector for selecting an element futherup in the html?
  27. How can I target a specific column or row in a CSS grid layout?
  28. Hide element, but show CSS generated content
  29. How to select classes with spaces
  30. Targeting text nodes with CSS

Leave a Comment