【CSS】CSS Nestingについて
2023.11.20 Posted by Coding_team
こんにちは、今回はCSS Nestingについて紹介したいと思います。
簡単に言えばNesting（入れ子）、つまりCSSの入れ子構造ということになります。
記法的にはSassと同じような感じで記述することができます。（例外も有り）
まずは対応ブラウザをご覧ください。
Chrome、Edge、Safariなどは部分的な対応となっていますのでご注意ください。
注意書きで書いてありますが、先頭に要素型セレクターを用いるのは許可されていません。
従来の書き方と比較して簡単な例を作りましたので説明していきます。以下のソースをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.block { > p { text-align: left; &:hover { text-decoration: underline; } } .txt { text-align: center; } } /* 従来の書き方 .block p { text-align: left; } .block p:hover { text-decoration: underline; } .block .txt { text-align: center; } */ |
従来の書き方と比較すると入れ子の構造になっているのが分かると思います。&は親要素（親セレクタ）を指します。
現状の基本的なルールとしては、先述した先頭に要素型セレクターが来てはいけないというのが重要です。（Firefoxを除く）
なので > p と直下セレクタを記述しています。少し不便かもしれませんがいずれ対応されて欲しいところです。
※直下セレクタである必要は無いので用途に合わせて記述してください。
その他細かい仕様やルールなどは以下のW3Cの文書をご覧ください。
非常に便利な記述方法ですが、対応していないブラウザのシェアとか見た感じだとまだ導入は難しそうですね。。。
今後の動向に注視しとく必要がありそうです。
以上クリエイターズブログでした。
関連記事こちらの記事も合わせてどうぞ。
