Skip to main content

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 TypeCode ExampleSupport
Universal selector*
Type selectordiv
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 combinatordiv span
Child combinatordiv > span
Next-sibling combinatordiv + span
Subsequent-sibling combinatordiv ~ span
Column combinatordiv || span
Multiple selectorsdiv, 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.

SyntaxDescription
: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)
SyntaxCodeDescription
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.