@markuplint/selector

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

:aria(syntax)

| 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

:role(roleName)
:role(roleName|version)

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

:model(interactive)
:model(palpable)

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

Regex Selector

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

Documentation

• Architecture (日本語) -- Package overview, module map, and class hierarchy
• Selector Matching (日本語) -- CSS and regex selector matching algorithm details
• Maintenance Guide (日本語) -- Commands, testing, recipes, and troubleshooting

Install

markuplint package includes this package.

$ npm install @markuplint/selector

$ yarn add @markuplint/selector