ページ固有のIDと:has疑似クラスによるProjectCSSのサンドボックス

セレクター：.line.section-0.line-title.section-title[id=""]（ページタイトル行）

各ページには固有のIDが振られており、その値はブラウザの開発者ツールから確認できる（クラス名をブラウザで確認する）。

セレクターを特定のページに限定して適用する方法の一つは、:has()擬似クラスでこのページIDをピンポイントに指定することである。

さらに、このことを利用してProjectCSSのサンドボックスのようなページを作成することができる。

具体的方法

ここでは例としてサンドボックスを2つ作成する。

1. ページの準備

Sandbox – Sandbox/test1とSandbox/test2のCSSを記述するページ

Sandbox/test1 – スタイル適用対象のページその1

Sandbox/test2 – スタイル適用対象のページその2

2. ProjectCSS からの import 設定

Sandbox のstyle.cssをProjectCSSのstyle.cssに@importする。

code:settings/style.css

@import '/api/code/<project>/Sandbox/style.css';

「Sandbox」ページの構成

1. セレクターの始端

code:style.css

@import '/api/code/<project>/Sandbox/style-1.css';

@import '/api/code/<project>/Sandbox/style-2.css';

code:style-1.css

html body:has(.app main.page .lines .line.section-0.line-title.section-title#<page-id>) {

code:style-2.css

html body:has(.app main.page .lines .line.section-0.line-title.section-title#<page-id>) {

<page-id> – 1.にて作成したスタイル適用対象ページのID（Sandbox/test1、Sandbox/test2）

2. 個別スタイルの記述部分

上記セレクターのスコープ内に、そのページにのみ反映させたい具体的なCSSコードを記述する。

注意：セレクターの先頭の& 入れ子セレクター（MDN）を省略した場合、一部のプロパティが正常に反映されないことがある。

Sandbox/test1 用のCSS

code:style-1.css

& .app {

background-color: red;

}

Sandbox/test1 の背景を赤くする例

Sandbox/test2 用のCSS

code:style-2.css

@container style(--page-bg: #fff) {

& .app {

background-color: green;

}

Sandbox/test2 の背景を緑色にする例

3. スコープの終端

code:style-1.css

}

code:style-2.css

}