Understanding Selectors

It should set selector to apply to some. The selector syntax supports the same as CSS Selectors, Markuplint specific extended syntaxes, and more. So you can select elements quite flexibly.

CSS Selectors

It supports parts of W3C Selectors Level 4.

Supported selector syntaxes 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]`	✅
Attribute selector, Include whitespace separated	`[data-attr~=value]`	✅
Attribute selector, Subcode match	`[data-attr\|=value]`	✅
Attribute selector, Partial match	`[data-attr*=value]`	✅
Attribute selector, Forward match	`[data-attr^=value]`	✅
Attribute selector, Backward match	`[data-attr$=value]`	✅
Negation pseudo-class	`:not(div)`	✅
Matches-Any pseudo-class	`:is(div)`	✅
Specificity-adjustment pseudo-class	`:where(div)`	✅
Relational pseudo-class	`: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`	✅
Next-sibling combinator	`div + span`	✅
Subsequent-sibling combinator	`div ~ span`	✅
Column combinator	`div \|\| span`	❌
Multiple selectors	`div, span`	✅

tip

It supports :has selector. You can select elements flexibly if you do it with combinator operators.

:has selector with Subsequent-sibling combinator
{
  "nodeRules": [
    {
      // Apply to all elements that are <picture>'s child and previous siblings of <img>
      "selector": "picture img:has(~)",
      "rules": {
        "required-attr": true
      }
    }
  ]
}

Specificity

It applies specificity same as CSS Selectors. By doing this, you can control priority to apply rules.

Control priority
{
  "nodeRules": [
    {
      // Apply
      "selector": "#id.class-name", // Specificity: 1-1-0
      "rules": {
        "required-attr": true
      }
    },
    {
      // Don't apply (Ignore)
      "selector": ".class-name", // Specificity: 0-1-0
      "rules": {
        "required-attr": false
      }
    }
  ]
}

info

Apply according to settings in order when selectors are the same specificity.

tip

It supports :where selector. The selector always has zero specificity.

Control priority
{
  "nodeRules": [
    {
      // Don't apply
      "selector": ":where(#id.class-name)", // Specificity: 0-0-0
      "rules": {
        "required-attr": true
      }
    },
    {
      // Apply (Overwrite)
      "selector": ".class-name", // Specificity: 0-1-0
      "rules": {
        "required-attr": false
      }
    }
  ]
}

Extended selectors

You can use selectors like pseudo-class that Markuplint extended.

Syntax	Description
`:closest(selectors)`	Concept: `Element.closest` method
`:aria(has name)`	ARIA pseudo-class
`:role(heading)`	ARIA Role pseudo-class
`:model(interactive)`	Content Model pseudo-class

info

This selectors are experemental features. It goes without saying these are not compatibility. It will drop these in the next major version immediately if they conflict with CSS Selectors.

`:closest`

Concept: Element.closest method

:closest(selectors)

It applies to elements that have ancestors that match the selectors.

`:aria`

ARIA pseudo-class

:aria(syntax)

Syntax	Code	Description
`has name`	`:aria(has name)`	Apply elements have accessible name
`has no name`	`:aria(has no name)`	Apply elements have no accessible name

`:role`

ARIA Role pseudo-class

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

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

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

`:model`

Content Model pseudo-class

:model(contentModel)

For example, :model(interactive) matches <a>(with href attr), <button>, and more.

Regular expression selector

Use regular expressions to select elements. Specify it to match the node name, attribute name, or attribute value, or combine each.

{
  "childNodeRules": [
    {
      "regexSelector": {
        "nodeName": "/^[a-z]+$/",
        "attrName": "/^[a-z]+$/",
        "attrValue": "/^[a-z]+$/"
      },
      "rules": {
        "required-attr": "true"
      }
    }
  ]
}

You can select elements more complexly. See explained configuring regexSelector if you want details.

caution

Cannot specify regexSelector together with selector. It prioritizes selector over regexSelector.

Understanding Selectors

CSS Selectors​

Specificity​

Extended selectors​

:closest​

:aria​

:role​

:model​

Regular expression selector​