-
Notifications
You must be signed in to change notification settings - Fork 0
First Match Selector
Tommy Hodgins edited this page Oct 6, 2019
·
1 revision
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.