「入れ子」を使ったCSSのコーディング
CSSのセレクタと言えば、「hero.index」や「hero h2」のようにピンポイントで書くのが一般的ですが、2023年あたりからCSSでも「SCSS（Sass）」と同じように「入れ子」にして書くことができるようになりました。
SCSS（Sass）についてはこちらをお読みください。
この記事の目次
CSSの「入れ子」とは？
CSSの「入れ子」とは、HTMLにおける「親要素と子要素の関係」のようなものになります。
この関係をそのままCSSでも表現したものがCSSの「入れ子」だと思っていただけたらと思います。
（「入れ子」は「ネスト」とも呼ばれています）
CSSを「入れ子」でコーディングするメリット・デメリット
CSSを「入れ子」でコーディングする一番のメリットは「セレクタの視認性が良くなり、管理がしやすくなること」です。
左が従来の書き方で、右が「入れ子」を使った書き方になります。
もちろんインデント（字下げ）をする必要がありますが、パッと見てセレクタの関係がわかるようになり、セレクタの指定ミスが減らせるようになります。
また、「入れ子」の中には「メディアクエリ」を含めることもできます。
従来CSSファイル内の別々の場所に書いていたメディアクエリのCSSですが、「入れ子」に含めることであちこちに移動することなくPC表示やスマホ表示の調整ができるようになります。
一方デメリットとしては、ルールに沿っていないと適用されない（通常のセレクタでも同じですが）ということと、入れ子にしすぎる（階層が増えすぎる）と逆にわかりにくくなることに加え、各要素にメディアクエリを追加していくことで、コード全体の量が増えてしまう点が考えられます。
そのあたりは構成を事前によく考えておけば良いのと、スマホ表示の調整などでCSSファイルを上から下まで何度もスクロールしてきたことを考えると、メリットの方が上回るのは明白です。
今まで基本的なセレクタの書き方をしてきたので慣れるまで大変かと思いますが、なんとか習得していただけたらと思います。
（ある程度覚えた上で、自分には不要だと思えば使わなくても良いかと思います）
CSSで「入れ子」にする時のルール
上でも書いたように、CSSを「入れ子」でコーディングするには、ルールに沿った書き方をする必要があります。
ルールと言ってもSCSS（Sass）で「入れ子」を使う時と同じなので、よく使われるパターンで説明していきます。
親子要素の場合（Aの中にあるB）
親子要素を入れ子にする場合、子要素のセレクタには何も付けずに指定する。
/* 通常 */
.nav ul {~}
.nav a {~}
/* 入れ子 */
.nav {
ul {~}
a {~}
}
複数のセレクタを同時に指定場合（AかつB）
複数のセレクタを同時に指定する（AかつB）場合は「＆」を付ける。
/* 通常 */
.hero.index {~}
.hero.access{~}
/* 入れ子 */
.hero {
&.index{~}
&.access{~}
}
複数の親子要素を指定する場合（AとB）
複数の親子要素をセレクタに指定する場合は、子要素をカンマで区切る。
/* 通常 */
table th, table td {~}
/* 入れ子 */
table {
th, td {~}
}
疑似クラス・疑似要素を使う場合
疑似要素を入れ子にする場合「＆」を付ける。
/* 通常 */
.item:first-child {~}
.item:nth-of-type(2) {~}
h2::before {~}
h2::after {~}
/* 入れ子 */
.item {
&:first-child {~}
&:nth-of-type(2) {~}
}
h2 {
&::before{~}
&::after{~}
}
メディアクエリを入れ子に含める場合
メディアクエリを入れ子に含める場合は、そのまま条件（@media）を記入する。
/* 通常 */
main {~}
main h2 {~}
@media(max-width:600px){
main {~}
main h2{~}
}
/*入れ子*/
main {
~
h2 {~}
@media(max-width:600px){
~
h2 {~}
}
}
このように、パターンによって書き方が変わるのですが、最低限この二つを覚えておくと理解が早いかもしれません。
- 通常のセレクタ指定で半角スペースが入る場合（nav ul など）は何も付けない
- 通常のセレクタ指定で半角スペースを入れず続けて書く場合（.hero.index、h2::before など）は「＆」を付ける
この書き方は慣れるまでに時間が掛かるかもしれませんが、「管理しやすいコーディング」をするには非常に便利な機能なので、ぜひ一度お試しください。
