Last Match Selector - tomhodgins/process-css-demo GitHub Wiki

This pseudo-class-style selector allows CSS authors to target only the last element that matches a selector in the entire document, this is similar to what document.querySelectorAll()[length - 1] would return in JavaScript.

<selector>:--last { <list of declarations> }

• <selector> is a CSS selector to match

Though you can use :last-of-type and :last-child to target the last element on a certain level, what if you only want to target the last element to match a selector at any level anywhere in the document. Consider a selector like this:

section h1 {}

Maybe it's the easiest way to target the last section h1 but you don't want to accidentally target any other section h1 that might be on the page:

section h1:--last {}

Now the rule will be limited to only the first element matching section h1 in the document, the same element that would be returned by:

document.querySelectorAll('section h1')[
  document.querySelectorAll('section h1').length - 1
]

• This feature automatically uses jsincss-last-selector plugin for support in the browser.