From 4c38d3b42c7b207ffe217af270bf26190eba6b85 Mon Sep 17 00:00:00 2001
From: Shota Takahashi <shotakaha@kmi.nagoya-u.ac.jp>
Date: Sun, 26 Nov 2023 08:13:40 +0900
Subject: [PATCH] =?UTF-8?q?feat(html/css-nest.md):=20CSS=E3=83=8D=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/source/html/css-nest.md   | 48 ++++++++++++++++++++++++++++++++++
 docs/source/html/html-usage.md |  1 +
 2 files changed, 49 insertions(+)
 create mode 100644 docs/source/html/css-nest.md

diff --git a/docs/source/html/css-nest.md b/docs/source/html/css-nest.md
new file mode 100644
index 00000000..969946a6
--- /dev/null
+++ b/docs/source/html/css-nest.md
@@ -0,0 +1,48 @@
+# ネストしたい
+
+```css
+
+:root {
+    --color-text-main: black;
+    --color-text-active: blue;
+}
+
+a {
+    display: inline flow-root;
+    color: var(--color-text-main);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--color-text-active);
+    }
+}
+```
+
+スタイルを入れ子構造で記述できます。
+入れ子にすることで、スタイルの適用範囲が分かりやすくなります。
+
+上記サンプルのように、リンクにホバーしたときに文字色を変えたい場合は、書くのがとても楽になりました。
+
+:::{note}
+
+これまでの書き方だと、以下のようになります。
+
+```css
+a {
+    display: inline flow-root;
+    text-decoration: none;
+    color: var(--color-text-main);
+}
+
+a:hover {
+    color: var(--color-text-active);
+}
+```
+
+:::
+
+:::{note}
+
+[Can I use](https://caniuse.com/mdn-css_selectors_nesting)を確認すると、まだブラウザでフルサポートされていません。
+
+:::
diff --git a/docs/source/html/html-usage.md b/docs/source/html/html-usage.md
index 6456524f..ecd63e15 100644
--- a/docs/source/html/html-usage.md
+++ b/docs/source/html/html-usage.md
@@ -30,6 +30,7 @@ html-jsonld
 ```{toctree}
 css-selectors
 css-variables
+css-nest
 css-font
 css-display
 css-margin