セレクタの理解

部分的な適用をする場合には、セレクタを設定する必要があります。セレクタの構文は、CSSセレクタと同じものや、Markuplint独自の拡張構文などをサポートしています。そのため、とても柔軟に要素を選択できます。

CSSセレクタ

W3C Selectors Level 4の一部をサポートしています。

対応しているセレクタとオペレータ

種類	サンプルコード	サポート
全称セレクタ	`*`	✅
要素型セレクタ	`div`	✅
IDセレクタ	`#id`	✅
クラスセレクタ	`.class`	✅
属性セレクタ	`[data-attr]`	✅
属性セレクタ（完全一致）	`[data-attr=value]`	✅
属性セレクタ（スペース区切り一致）	`[data-attr~=value]`	✅
属性セレクタ（サブコード一致）	`[data-attr\|=value]`	✅
属性セレクタ（部分一致）	`[data-attr*=value]`	✅
属性セレクタ（先頭一致）	`[data-attr^=value]`	✅
属性セレクタ（末尾一致）	`[data-attr$=value]`	✅
not擬似クラス	`:not(div)`	✅
is擬似クラス	`:is(div)`	✅
where擬似クラス	`:where(div)`	✅
has擬似クラス	`:has(div)` `:has(> div)`	✅
dir擬似クラス	`:dir(ltr)`	❌
lang擬似クラス	`:lang(en)`	❌
any-link擬似クラス	`:any-link`	❌
リンク擬似クラス	`:link` `:visited`	❌
local-link擬似クラス	`:local-link`	❌
target擬似クラス	`:target`	❌
target-within擬似クラス	`:target-within`	❌
scope擬似クラス	`:scope`	✅
current擬似クラス	`:current` `:current(div)`	❌
past擬似クラス	`:past`	❌
future擬似クラス	`:future`	❌
インタラクティブ擬似クラス	`:active` `:hover` `:focus` `:focus-within` `:focus-visible`	❌
enable擬似クラス	`:enable` `:disable`	❌
read-write擬似クラス	`:read-write` `:read-only`	❌
placeholder-shown擬似クラス	`:placeholder-shown`	❌
default擬似クラス	`:default`	❌
checked擬似クラス	`:checked`	❌
indeterminate擬似クラス	`:indeterminate`	❌
valid擬似クラス	`:valid` `:invalid`	❌
in-range擬似クラス	`:in-range` `:out-of-range`	❌
required擬似クラス	`:required` `:optional`	❌
blank擬似クラス	`:blank`	❌
user-invalid擬似クラス	`:user-invalid`	❌
root擬似クラス	`:root`	✅
empty擬似クラス	`:empty`	❌
Nth-child擬似クラス	`:nth-child(2)` `:nth-last-child(2)` `:first-child` `:last-child` `:only-child`	❌
Nth-child擬似クラス (`of El`構文)	`:nth-child(2 of div)` `:nth-last-child(2 of div)`	❌
Nth-of-type擬似クラス	`:nth-of-type(2)` `:nth-last-of-type(2)` `:first-of-type` `:last-of-type` `:only-of-type`	❌
Nth-col擬似クラス	`:nth-col(2)` `:nth-last-col(2)`	❌
疑似要素	`::before` `::after`	❌
子孫結合子	`div span`	✅
子結合子	`div > span`	✅
後方隣接兄弟結合子	`div + span`	✅
後方兄弟結合子	`div ~ span`	✅
列結合子	`div \|\| span`	❌
セレクタリスト	`div, span`	✅

ヒント

:hasセレクタをサポートしています。一般兄弟結合子とつかうことでより柔軟に要素を選択できます。

:hasセレクタと一般兄弟結合子
{
  "nodeRules": [
    {
      // <picture> の子で <img> より前に現れるすべての要素に適用
      "selector": "picture img:has(~)",
      "rules": {
        "required-attr": true
      }
    }
  ]
}

詳細度

CSSセレクタと同じく詳細度がを適用されます。これにより、ルールを適用する優先順位を制御できます。

優先順位の制御
{
  "nodeRules": [
    {
      // 適用される
      "selector": "#id.class-name", // 詳細度: 1-1-0
      "rules": {
        "required-attr": true
      }
    },
    {
      // 適用されない (除外される)
      "selector": ".class-name", // 詳細度: 0-1-0
      "rules": {
        "required-attr": false
      }
    }
  ]
}

備考

セレクタが同じ詳細度をもつ場合、設定の順番に従って適用されます。

ヒント

:whereセレクタをサポートしています。このセレクタの詳細度は常にゼロになります。

優先順位の制御
{
  "nodeRules": [
    {
      // 適用されない
      "selector": ":where(#id.class-name)", // 詳細度: 0-0-0
      "rules": {
        "required-attr": true
      }
    },
    {
      // 適用される（上書き）
      "selector": ".class-name", // 詳細度: 0-1-0
      "rules": {
        "required-attr": false
      }
    }
  ]
}

拡張セレクタ

Markuplint独自の擬似クラスに似た拡張セレクタをつかうことができます。

構文	機能
`:closest(selectors)`	`Element.closest`メソッド
`:aria(has name)`	ARIA擬似クラス
`:role(heading)`	ARIAロール擬似クラス
`:model(interactive)`	コンテンツモデル擬似クラス

備考

このセレクタは、あくまでも実験的な機能です。もちろん、互換性はありません。CSSセレクタと競合した場合は、次のメジャーバージョンで即座に削除されます。

`:closest`

Element.closestメソッドの擬似クラス版

:closest(selectors)

セレクタにマッチする祖先を持つ要素に適用されます。

`:aria`

ARIA擬似クラス

:aria(syntax)

Syntax	Code	Description
`has name`	`:aria(has name)`	アクセシブルな名前をもつ要素に適用
`has no name`	`:aria(has no name)`	アクセシブルな名前をもたない要素に適用

`:role`

ARIAロール擬似クラス

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

たとえば、:role(button)は<button>と<div role="button">にマッチします。

WAI-ARIAのバージョンは:role(form|1.1)のようにパイプで区切って指定ができます。

`:model`

コンテンツモデル擬似クラス

:model(contentModel)

たとえば、:model(interactive)は<a>（href属性あり）や<button>などにマッチします。

正規表現セレクタ

正規表現を使用して要素を選択します。ノード名、属性名、属性値のいずれかにマッチするように指定するか、それぞれを組み合わせて指定します。

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

より複雑な要素を選択できます。詳しくはregexSelectorの設定方法を参照してください。

注意

regexSelectorとselectorは同時に指定できません。regexSelectorよりもselectorが優先されます。

セレクタの理解

CSSセレクタ​

詳細度​

拡張セレクタ​

:closest​

:aria​

:role​

:model​

正規表現セレクタ​