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

This pseudo-class-style selector allows CSS authors to target only the first element that matches a selector in the entire document, this is similar to what document.querySelector() would return in JavaScript.

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

• <selector> is a CSS selector to match

Though you can use :first-of-type and :first-child to target the first element on a certain level, what if you only want to target the first 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 first section h1 but you don't want to accidentally target any other section h1 that might be on the page:

section h1:--first {}

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.querySelector('section h1')

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