UPDATE：2023.12.1
- CATEGORY
【SASS不要】CSSネストまとめ
Contents
CSSネストとは
CSSを階層で記述することができます。
たとえば従来のCSSでは特定の要素に対してスタイルを適用したい時、以下のように記述する必要がありました。
spanの要素に白を指定したいが、
全てのspanではなくdivの中に入っているものにのみ適用したい場合にこのように記述します。
しかしCSSネストを使えば記述を以下のようにできます。
CSSネストの記述例
div {
span{
color: #fff;
}
}
疑似要素のCSSネスト
「:hover」「::after」などの疑似要素のネストは「&」を付けて記述します。
.section{
& a{
color: #f00;
&:hover{
color: #000;
}
}
}
ネストの利点はCSSの管理がわかりやすくなる（可読性が高くなる）・
同じ要素を繰り返し書かなくても良くなるといったところでしょうか。
少し前まではこのネストはSASS等のCSSプリプロセッサを利用しないと使えませんでしたが、
現在ほぼすべてのモダンブラウザでそれらを使わなくても素のCSSネストに対応しています。
CSSネスト 対応ブラウザ
ただし現在(記事執筆時点2023/11/24)では、CSSネストはSASSとは若干記述のルールが異なる点があります。
要素名のセレクタに適用させたい場合は & を付ける必要がある
「p」や「H1」などの要素名のセレクタに対してネストを適用させるには「&」を付ける必要があります。（※2023/11/24執筆時点）
.section {
& h1 {
/* これは有効になる */
}
}
.section {
h1 {
/* これは無効となる */
}
}
しかし今後は上記のルールが改善されてより使いやすくなります。
Chrome 120 より、要素名のセレクタに対するネストの記述がより簡単に
SASSを使わずにCSSネストが使えるようになるのは大歓迎ではありましたが、
しかし要素名セレクタに対しては 「&」が必要な点が若干使いづらいと感じていた部分でした。
これについてChrome 120では改善されて、以下のような記述も有効になるとのことです。
.section {
h1 {
/* ここが有効になる */
}
}
この変更によって、よりCSSネストが使いやすくなるのではないかと思います。
参考
div span {
color: #fff;
}