構文

セレクター

セレクターの付加方法、関連要素、リスト、リテラルのエンコード、詳細度。

このページの内容

セレクターの接尾辞は、クラスの宣言を受け取る要素または疑似要素を決めます。完全なクラスを持つ要素が起点です。接尾辞はその要素を検査したり、関係する要素を選択したり、その両方を行ったりできます。

このページではセレクターの付加、エンコード、グループ化、詳細度を定義します。コンポーネントにホバーとキーボードフォーカスのスタイルを付ける方法は構文チュートリアル、ネイティブの一致動作は CSS セレクターを参照してください。

セレクターの付加

登録済みユーティリティ、またはネイティブ宣言の閉じ括弧の後ろにセレクターを付けます。条件はセレクターの後、重要度は末尾に置きます。

utility<selector><conditions>!(property:value)<selector><conditions>!

上の山括弧の部分と ! は省略可能な構文のプレースホルダーです。たとえば underline:hover@sm は、クラスを持つ要素がホバーされ、ビューポートが @sm に一致するときに下線を付けます。条件によってセレクターの対象要素は変わりません。

生成された CSS

@layer utilities {  @media (width >= 52.125rem) {    .underline\:hover\@sm:hover {      text-decoration-line: underline    }  }  @media (width >= 52.125rem) {    .\(text-decoration-thickness\:2px\)\:hover\@sm:hover {      text-decoration-thickness: 2px    }  }}

Master CSS は生成する CSS セレクター内で完全なクラス名をエスケープします。.underline\:hover のコロンはクラス名そのものの一部で、後ろに付く :hover が実際の疑似クラスです。HTML には例のようにエスケープしていないクラスを書きます。

クラスを持つ要素への一致

結合子がなければ、接尾辞はクラスを持つ要素に要件を追加します。underline.active はクラス一覧に underline.active と active の両方を持つ要素だけに一致します。

<a class="underline.active active" href="/guide/installation">Installation</a>

クラス	クラスを持つ要素への要件
`underline.active`	`active` クラスも持つ
`underline#current`	ID が `current`
`underline[data-current]`	`data-current` 属性を持つ
`underline:hover`	ブラウザーのホバー状態に一致する
`underline:is(a)`	`a` 要素である

生成された CSS

@layer utilities {  .underline\#current#current {    text-decoration-line: underline  }  .underline\:is\(a\):is(a) {    text-decoration-line: underline  }  .underline\[data-current\][data-current] {    text-decoration-line: underline  }  .underline\:hover:hover {    text-decoration-line: underline  }  .underline\.active.active {    text-decoration-line: underline  }}

同じ要素の型を検査するには :is(a) または :where(a) を使います。子を選ぶには >a または >* を使います。ユーティリティ名の直後にタグ名だけを付けても、別のセレクター接尾辞にはなりません。

要件の組み合わせ

隣接する単純セレクターは同じ要素を表します。underline:hover:not([aria-disabled=true]) はホバーを要求し、aria-disabled 属性が true の要素を除外します。その属性を設定したり更新したりはしません。

生成された CSS

@layer utilities {  .underline\:hover\:not\(\[aria-disabled\=true\]\):hover:not([aria-disabled=true]) {    text-decoration-line: underline  }}

セレクターは DOM とブラウザーの状態に反応するもので、操作の動作は作りません。ネイティブ属性と ARIA はそれぞれの意味を保ちます。特に aria-disabled="true" は無効状態を表すだけで、それ自体では実行を防ぎません。

関係する要素

結合子はクラスを持つ要素から別の要素へ移動します。宣言はセレクターの終点の要素に適用され、クラスを持つ要素から継承されるわけではありません。

クラス	対象
`underline_a`	深さを問わず子孫のリンク
`underline>a`	直下の子リンク
`underline+a`	次の兄弟要素がリンクならその要素
`underline~a`	同じ親を持つ後続の兄弟リンクすべて
`underline>*`	直下の子要素すべて

_ はセレクター間の子孫を表す空白をエンコードします。HTML に実際の空白を書くと別のクラスが始まります。>、+、~ は CSS 本来の意味を保ちます。

生成された CSS

@layer utilities {  .underline\+a + a {    text-decoration-line: underline  }  .underline\>\* > * {    text-decoration-line: underline  }  .underline\>a > a {    text-decoration-line: underline  }  .underline_a a {    text-decoration-line: underline  }  .underline\~a ~ a {    text-decoration-line: underline  }}

状態の位置

状態の位置によって、どの要素がその状態に一致する必要があるかが決まります。次の 2 つのクラスは同じ親子関係を持ちますが、ホバーを検査する位置が異なります。

article 上のクラス	ホバーの要件	下線を付けるリンク
`underline:hover>a`	article がホバーされている	直下の子リンクすべて
`underline>a:hover`	直下の子リンクがホバーされている	そのリンクのみ

<article class="underline:hover>a">  <p>Documentation</p>  <a class="(text-decoration-line:none)" href="/guide/installation">Installation and setup</a>  <a class="(text-decoration-line:none)" href="/reference/packages">API reference</a></article><article class="underline>a:hover">  <p>Documentation</p>  <a class="(text-decoration-line:none)" href="/guide/installation">Installation and setup</a>  <a class="(text-decoration-line:none)" href="/reference/packages">API reference</a></article>

生成された CSS

@layer utilities {  .\(text-decoration-line\:none\) {    text-decoration-line: none  }  .underline\:hover\>a:hover > a {    text-decoration-line: underline  }  .underline\>a\:hover > a:hover {    text-decoration-line: underline  }}

リンクをホバーすると祖先の article もホバーされます。そのため最初の例では両リンクが対象になり、2 番目の例ではもう一方のリンクは自身の :hover 検査に一致しません。各クラスは article が持ちますが、宣言の対象はそのリンクです。リンクのクラスが既定の下線を消し、より詳細度の高い親子セレクターがホバー条件の一致時に下線を戻します。

セレクターリスト

最上位のカンマは、同じクラスを持つ要素から別の分岐を始めます。各分岐に結合子を繰り返してください。block>div,>span は直下の div と直下の span を選びます。2 番目の分岐は最初の分岐の対象から続くわけではありません。

<section class="block>div,>span">  <div>First child</div>  <span>Second child</span></section>

生成された CSS

@layer utilities {  .block\>div\,\>span > div,  .block\>div\,\>span > span {    display: block  }  .\(content\:\'“\'\)\:\:before\,\:\:after::before,  .\(content\:\'“\'\)\:\:before\,\:\:after::after {    content: '“'  }}

関数内や引用符付きの属性値内のカンマは、その構造の中に残ります。underline:is(:hover,:focus-visible) は選択肢を 2 つ持つ 1 個のセレクター接尾辞で、最上位の分岐が 2 つあるわけではありません。

生成された CSS

@layer utilities {  .underline\[data-label\=\'draft\,review\'\][data-label='draft,review'] {    text-decoration-line: underline  }  .underline\:is\(\:hover\,\:focus-visible\):is(:hover, :focus-visible) {    text-decoration-line: underline  }}

セレクター関数

関数	一致の動作
`:is(...)`	リストの少なくとも 1 つのセレクターに一致する
`:where(...)`	`:is()` と同じく一致するが、関数と引数の詳細度はゼロ
`:not(...)`	リストのどれかに一致する要素を除外する
`:has(...)`	選択する要素から相対的な一致を検査する

:has() は関係を検査しますが、一致した関連要素に宣言を移しません。b-blue-60:has(>input:checked) は、label の直下の input がチェックされているときに label の枠線の色を設定します。

<label class="b(1) b-solid b-line-control b-blue-60:has(>input:checked)"><input type="checkbox" />Include archived items</label>

生成された CSS

@layer theme {  :root,  :host {    --color-blue-60: oklch(51.83% .2687 266.1)  }}@layer utilities {  .b-blue-60\:has\(\>input\:checked\):has(>input:checked) {    border-color: var(--color-blue-60)  }  .underline\:has\(\+input\:checked\):has(+input:checked) {    text-decoration-line: underline  }}

相対的な一致は兄弟要素でも可能です。underline:has(+input:checked) は、次の兄弟要素がチェック済みの input なら、クラスを持つ要素に下線を付けます。ネイティブの :has() の制限も適用され、:has() の中に自身を入れ子にするのは無効です。動くチェックボックスの例と代替手段は互換性を参照してください。

ネイティブの状態

Master CSS はネイティブの疑似クラス名を保持します。以下はよく使う接尾辞であり、状態の完全な登録一覧ではありません。

接尾辞	ネイティブの一致の文脈
`:hover`, `:active`	ポインターのホバーまたはアクティブ状態
`:focus`, `:focus-visible`, `:focus-within`	要素のフォーカス、可視のフォーカス表示、内部のフォーカス
`:first-child`, `:last-child`, `:nth-child(even)`	兄弟要素の中での位置
`:valid`, `:invalid`, `:required`	ネイティブフォームの制約
`:disabled`	無効なフォームコントロール
`:checked`, `:indeterminate`	ネイティブコントロールの状態
`:dir(rtl)`, `:dir(ltr)`	解決されたテキストの方向

:first-child や :nth-child(odd) などの完全な名前を使ってください。Master CSS が出力できる綴りでも、ブラウザーでは未対応または無効な場合があります。各状態の詳細な動作はネイティブの疑似クラスリファレンスを参照してください。

<ul>  <li class="bg-surface-inset:nth-child(even)">Draft</li>  <li class="bg-surface-inset:nth-child(even)">In review</li>  <li class="bg-surface-inset:nth-child(even)">Published</li></ul>

生成された CSS

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100))  }  :root,  :host {    --spacing-xs: .5rem  }}@layer utilities {  .bg-surface-inset\:nth-child\(even\):nth-child(even) {    background-color: var(--color-surface-inset)  }  .mr-xs\:dir\(rtl\):dir(rtl) {    margin-right: var(--spacing-xs)  }  .\(opacity\:\.5\)\:disabled:disabled {    opacity: .5  }}

属性セレクター

属性の接尾辞は DOM の値を検査します。真偽値形式の属性セレクターは存在を検査し、[open] は開いた details 要素に、[data-active] は属性が存在すれば一致します。特定の状態値を検査するには [aria-pressed=true] のように値を含めます。

接尾辞	一致の条件
`[data-active]`	値が空でも属性が存在する
`[aria-pressed=true]`	値が正確に `true`
`[href^=https]`	値が `https` で始まる
`[href$='.pdf']`	値が `.pdf` で終わる
`[title*=master]`	値に `master` を含む
`[lang\|=en]`	値が `en` または `en-` で始まる
`[title~=css]`	空白区切りの値に単語 `css` を含む

引用符付きの属性テキストは文字どおりです。underline[data-state=':first']:first-child は値 :first と、要素の位置を別々に検査します。[data-id='a_b'] のアンダースコアは値の中に、.is\_active のエスケープされたアンダースコアはクラス識別子の中に残ります。

<a class="underline[data-state=':first']:first-child" data-state=":first" href="/guide">Guide</a><a class="underline.is\_active is_active" href="/reference">Reference</a>

生成された CSS

@layer utilities {  .underline\.is\\_active.is\_active {    text-decoration-line: underline  }  .underline\[data-id\=\'a_b\'\][data-id='a_b'] {    text-decoration-line: underline  }  .underline\[data-state\=\'\:first\'\]\:first-child[data-state=':first']:first-child {    text-decoration-line: underline  }}

CSS の引用符でも、HTML の空白によるクラスの分割は防げません。属性値に実際の空白が必要なら [data-label='New\000020collection'] のように CSS エスケープを使います。引用符付きの値の直後には、ASCII の大文字小文字を区別しない [data-kind='draft'i] のようにフラグを付けられます。演算子と大小文字の一致は属性セレクターを参照してください。

生成された CSS

@layer utilities {  .underline\[data-kind\=\'draft\'i\][data-kind='draft' i] {    text-decoration-line: underline  }  .underline\[data-label\=\'New\\000020collection\'\][data-label='New\000020collection'] {    text-decoration-line: underline  }}

疑似要素

疑似要素の接尾辞は、元の要素ではなくその疑似要素を対象にします。生成コンテンツには content 宣言を明示的に書きます。

<span class="(content:open-quote)::before (content:close-quote)::after">Keep the interface clear.</span>

生成された CSS

@layer utilities {  .\(background-color\:currentcolor\)\:\:-webkit-scrollbar-thumb::-webkit-scrollbar-thumb {    background-color: currentcolor  }  .\(content\:close-quote\)\:\:after::after {    content: close-quote  }  .\(content\:open-quote\)\:\:before::before {    content: open-quote  }}

ベンダー固有のセレクターは明示的に書きます。Master CSS は綴りを保持し、疑似要素をベンダー別の形に展開したりブラウザーの対応を補ったりしません。括弧を含む引用符付きの値はネイティブ宣言の境界を参照してください。

詳細度

生成されるセレクターはブラウザーの詳細度の規則に従います。エスケープされたクラス名は、名前内の記号に関係なくクラスセレクター 1 個分で、後ろに付けた接尾辞は別に寄与します。

クラス, ID – クラス・属性・状態 – 型・疑似要素	CSS
`underline`	`0-1-0`
`underline:hover`	`0-2-0`
`underline>a`	`0-1-1`
`underline:where(:hover,#selected)`	`0-1-0`
`underline:is(:hover,#selected)`	`1-1-0`

:is()、:not()、:has() はセレクターリスト内で最も高い引数の詳細度を使います。:where() は引数を含めて詳細度を加えません。結合子と全称セレクターも加えません。この重みはカスケードが出所、重要度、レイヤーの優先順を解決した後に適用されるため、詳細度が高いだけで別レイヤーの規則に勝つわけではありません。

生成された CSS

@layer utilities {  .underline\:is\(\:hover\,\#selected\):is(:hover, #selected) {    text-decoration-line: underline  }  .underline\:where\(\:hover\,\#selected\):where(:hover, #selected) {    text-decoration-line: underline  }}

規則の並び順はカスケードレイヤー、実際の選び方はガイドの上書き手順を参照してください。HTML のクラスを並べ替えても詳細度は変わりません。

外側の文脈

接尾辞はクラスを持つ要素を起点とします。祖先や先行する兄弟に基づくスタイルが必要な場合は、ネイティブ CSS の規則で関係を直接書けます。

@layer components {  .active .contextual {    display: none;  }  .active > .child-contextual {    display: none;  }  .active + .adjacent-contextual {    display: none;  }  .active ~ .sibling-contextual {    display: none;  }}

複数のユーティリティ宣言を同じ関係で包むには、ネイティブセレクターと @contents を持つミックスインを使います。展開と転送はミックスインの内容契約、この形式の選び方はスタイルの再利用を参照してください。

生成 CSS は出力の証拠であり、ブラウザーがそのセレクターをサポートし、一致する証明ではありません。DOM の関係、実際の状態、ネイティブセレクターの有効性を確認してください。通常の CSS セレクターリストでは無効な分岐がリスト全体を無効にする場合がありますが、:is() と :where() は寛容なリストを使います。ブラウザーの確認と代替設計は互換性を参照してください。