The :match-related pseudo-classes

Back to the index.

The :match pseudo-class targets a list of elements. :nth-match and :nth-last-match target specific elements of a similar target list.

The match list I use is p,h3.

:matches

The following rule should match all paragraphs and h3s in the document:

:matches(p,h3) {color: #6374AB;}

:nth-match

The following rule should match all even paragraphs and h3s in the document, where both count towards the even number.

The syntax of the first part is the same as for :nth-child; the second part is a match list.

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

:nth-last-match

The following rule does the same as the previous one, but starts counting at the end and goes backward.

:nth-last-match(even of p,h3) {text-transform: uppercase;}