Module @markuplint/selector


npm version

Extended W3C Selectors matcher

Supported selectors and operators:

Selector Type Code Example Support
Universal selector *
Type selector div
ID selector #id
Class selector .class
Attribute selector [data-attr]
Attribute selector, Exact match [data-attr=value] [data-attr=value i]
Attribute selector, Include whitespace separated [data-attr~=value] [data-attr~=value i]
Attribute selector, Subcode match [data-attr|=value] [data-attr|=value i]
Attribute selector, Partial match [data-attr*=value] [data-attr*=value i]
Attribute selector, Forward match [data-attr^=value] [data-attr^=value i]
Attribute selector, Backward match [data-attr$=value] [data-attr$=value i]
Negation pseudo-class :not(div)
Matches-Any pseudo-class :is(div)
Specificity-adjustment pseudo-class :where(div)
Relational pseudo-class :has(div) :has(> div) :has(+ div) :has(~ div)
Directionality pseudo-class :dir(ltr)
Language pseudo-class :lang(en)
Hyperlink pseudo-class :any-link
Link History pseudo-class :link :visited
Local link pseudo-class :local-link
Target pseudo-class :target
Target container pseudo-class :target-within
Reference element pseudo-class :scope
Current-element pseudo-class :current :current(div)
Past pseudo-class :past
Future pseudo-class :future
Interactive pseudo-class :active :hover :focus :focus-within :focus-visible
Enable and disable pseudo-class :enable :disable
Mutability pseudo-class :read-write :read-only
Placeholder-shown pseudo-class :placeholder-shown
Default-option pseudo-class :default
Selected-option pseudo-class :checked
Indeterminate value pseudo-class :indeterminate
Validity pseudo-class :valid :invalid
Range pseudo-class :in-range :out-of-range
Optionality pseudo-class :required :optional
Empty-Value pseudo-class :blank
User-interaction pseudo-class :user-invalid
Root pseudo-class :root
Empty pseudo-class :empty
Nth-child pseudo-class :nth-child(2) :nth-last-child(2) :first-child :last-child :only-child
Nth-child pseudo-class (of El Syntax) :nth-child(2 of div) :nth-last-child(2 of div)
Nth-of-type pseudo-class :nth-of-type(2) :nth-last-of-type(2) :first-of-type :last-of-type :only-of-type
Nth-col pseudo-class :nth-col(2) :nth-last-col(2)
Pseudo elements ::before ::after
Descendant combinator div span
Child combinator div > span (:has(> span))
Next-sibling combinator div + span (:has(+ span))
Subsequent-sibling combinator div ~ span (:has(~ span))
Column combinator div || span
Multiple selectors div, span

Extended Selector

The below is selectors that are extended by markuplint:

Selector Type Code Example
ARIA pseudo-class :aria(has name)
ARIA Role pseudo-class :role(heading)
Content Model pseudo-class :model(interactive)

ARIA pseudo-class

Syntax Example Description
has name :aria(has name) Matches the element has accessible name
has no name :aria(has no name) Matches the element has no accessible name

ARIA Role pseudo-class


For example, :role(button) matches <button> and <div role="button">.

You can specify the version of WAI-ARIA by separating the pipe like :role(form|1.1).

Content Model pseudo-class


For example, :role(interactive) matches <a>(with href attr), <button>, and so on.

Regex Selector

"nodeName": "/^[a-z]+$/",
"attrName": "/^[a-z]+$/",
"attrValue": "/^[a-z]+$/"


markuplint package includes this package.

If you are installing purposely, how below:
$ npm install @markuplint/selector

$ yarn add @markuplint/selector


Type Aliases


Generated using TypeDoc