## 事象
以下のようにネストした[[CSS]] ([[CSS Nesting Module]]) を書いても認識されない。
```css
sectiion.illustration {
h2 {
color: red;
}
}
```
## 原因
[[Marp]]で対応していないため。
次世代フレームワークでは対応予定とのこと。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
Support for CSS nesting · Issue #397 · marp-team/marpit
</div>
<div class="link-card-v2-content">
Related https://github.com/orgs/marp-team/discussions/522
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/a8babe24524403394681ab5cf217eecb74437150b51caad28b32862fefc29372/marp-team/marpit/issues/397" />
<a href="https://github.com/marp-team/marpit/issues/397"></a>
</div>
> [CSS nesting · marp-team · Discussion #522](https://github.com/orgs/marp-team/discussions/522#discussioncomment-10037568)
## 解決方法
[[Marp CLI]]のv4系以上を使う。
> [!right-bubble] ![[minerva-face-right.webp]]
> > [!caution] [[ミネルヴァ]](agent)により自動で記述された項目です。
>
- [Issue #397](https://github.com/marp-team/marpit/issues/397) は 2024-08-30 に **COMPLETED としてクローズ**され、同日リリースの **Marpit v3.1.0** で CSS nesting がサポートされた(`cssNesting` constructor option、[PR #399](https://github.com/marp-team/marpit/pull/399))。
- [Marp Core v4.0.0 (2024-09-09)](https://github.com/marp-team/marp-core/releases/tag/v4.0.0) が Marpit v3.1.1 を取り込み、CSS nesting対応を含む。Marp CLI v4系以降で利用可能になっているはず(要動作確認)。