Zenn
🧑🏻‍🎨

Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応

2022/11/18に公開
CSS
tech

（2023/08/29）
全ブラウザでネストに対応したので記事を更新しました。

本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐

次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

.container {
  .child {
    color: red;
  }
}

▼ ブラウザの実行結果（Google Chrome 112）

機能はほぼSassのネストと同じですが、一部に違いがあります。

本記事では、CSSネストの基本から各シーンでのコード例までを、デモを交えて紹介します。

ネストの基本

Sassのネストとほぼ同じです。

次のようなHTMLがあったとしてます。

<div class="container">
  <div class="child">
    Child
  </div>
</div>

.child 要素の文字色を赤色にしたい場合、従来は次のようにしていました。

.container .child {
  color: red;
}

CSSのネストに対応したブラウザでは、次のように記述できます。

▼ CSSのネスト記法①👩‍🎨

.container {
  .child {
    color: red;
  }
}

もしくは、 &を使って次のように記述します。

▼ CSSのネスト記法②👩‍🎨

.container {
  & .child {
    color: red;
  }
}

h1やpといった要素名のセレクターの場合

次のようなHTMLがあったとしてます。

<section>
  <h1>タイトル</h1>
</section>

h1 要素の文字色を赤色にしたい場合、次のようにしてもスタイルが当たりません。

▼ ネストがうまくいかない例

section {
  h1 {
    color: red;
  }
}

h1やpといった要素名のセレクターの場合は、&を使う必要があります。

▼ CSSのネスト記法👩‍🎨

section {
  & h1 {
    color: red;
  }
}

複数の親セレクターに対してネストはできるか？

可能です。

次のようなHTMLがあるとします。

<div class="apple">
  <p class="text">りんご</p>
</div>
<div class="orange">
  <p class="text">みかん</p>
</div>

.apple要素、.orange要素のそれぞれの子要素に.text要素があります。.text要素の文字色を赤色にしたい場合、従来は次のようにしていました。

▼ 従来のCSS

.apple .text,
.orange .text {
  color: red;
}

ネストを使えば、次のように記述できます。

▼ CSSのネスト👩‍🎨

.apple,
.orange {
  .text {
    color: red;
  }
}

一つの親要素から複数の子のCSS指定をネストにできるか？

可能です。

次のようなHTMLがあるとします。

<div class="container">
  <div class="child1">子供1</div>
  <div class="child2">子供2</div>
</div>

.container要素内に複数の子要素があります。それぞれの子要素の文字色を赤色にしたい場合、従来は次のようにしていました。

▼ 従来のCSS

.container .child1,
.container .child2 {
  color: red;
}

ネストを使えば、次のように記述できます。

▼ CSSのネスト👩‍🎨

.container {
  .child1,
  .child2 {
    color: red;
  }
}

&:hover の記法はできるか？

可能です。

次のようなHTMLがあるとします。

<a class="link" href="#">リンク</a>

.link要素で、hover時とactive時に文字色を赤色にしたい場合、従来は次のようにしていました。

▼ 従来のCSS

.link:hover,
.link:active {
  color: red;
}

ネストを使えば、次のように記述できます。

▼ CSSのネスト👩‍🎨

.link {
  &:hover,
  &:active {
     color: red;
  }
}

メディアクエリのネストはできるか？

可能です。

次のようなHTMLがあるとします。

<div class="box"></div>

.box要素について、通常の文字色は青色、ウインドウサイズ800px以上のときのみ文字色を赤色にしたい場合、従来は次のようにしていました。

▼ 従来のCSS

.box {
  color: blue;
}

@media (min-width: 800px) {
  .box {
    color: red;
  }
}

ネストを使えば、次のように記述できます。

▼ CSSのネスト👩‍🎨

.box {
  color: blue;

  @media (min-width: 800px) {
    color: red;
  }
}

「.box要素についてのメディアクエリを設定したい」と関心事が分離されるので、コードの見通しがよくなって便利ですね。 Sassの経験がある方は、それと同じ挙動であると思えばよいです。

セレクター名の一部を使った &__bar の記法はできるのか？

できません🙅‍

BEMなどを使っている際、次のような foo__bar というクラス名をHTMLで定義し・・・

<div class="foo__bar"></div>

次のようにSassでスタイルをあてるケースがよくあります。

▼ Sass。CSSのネストではない

.foo {
  &__bar {
    color: red;
  }
}

こういった使い方はCSSネストではできません。

ちなみにこの記法は、ジャンプできない・リファクタリングできない・コード検索が手間という理由により、CSS被害者救済法という法律で禁止されました。

ブラウザ対応状況

2023/08/29にFirefox 117がリリースされたことにより、全ブラウザでネストが使えるようになりました。

▼ 各ブラウザの実行結果

デモのURL

各動作が確認できるURLは次のとおりです。

https://codepen.io/tonkotsuboy/pen/ExRbPgV

▼ Chromeでの実行結果

今すぐCSSネストを使うには？

全ブラウザ対応したといっても、古いブラウザの対応も必要なケースがあるでしょう。
その場合は、PostCSSのプラグインを使いましょう。

最後に

CSSネストができるようになると、CSSのコーディングがラクになります。使い方もSassと似ているので、学習コストも低いでしょう。

CSSネストを使いこなし、見通しがよく便利なコーディングをしましょう。

関連資料

GitHubで編集を提案

Discussion