🧑🏻‍🎨

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

2022/11/18に公開

(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;
  }
}

h1pといった要素名のセレクターの場合

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

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

h1 要素の文字色を赤色にしたい場合、次のようにします。

▼ CSSのネスト記法👩‍🎨

section {
  h1 {
    color: red;
  }
}

ちなみに、CSS ネストが登場した当初は & を使う必要がありましたが、Chrome 120, Edge 120, Safari 17.2, Firefox 117では & の記法が不要になりました。

https://bugs.chromium.org/p/chromium/issues/detail?id=1427259

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

可能です。

次のような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がリリースされたことにより、全ブラウザでネストが使えるようになりました。また、2023/12に、各ブラウザで h1などのネスト時の & 記法が不要になりました。

デモのURL

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

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

▼ 各ブラウザの実行結果

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

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

最後に

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

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

関連資料

GitHubで編集を提案

Discussion