このページは Cloud Translation API によって翻訳されました。

CSS ネスト

お気に入りの CSS プリプロセッサ機能の一つが言語に組み込まれました。ネストスタイルルールです。

Adam Argyle

ネストする前に、すべてのセレクタは、明示的に宣言する相互に通信します。その結果、繰り返し、スタイルシートの一括処理、記述のばらつきが生じます。体験できます

変更前

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

ネストした後、セレクタは関連するスタイルルールをグループ化できます。

変更後

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

ブラウザで試してみる。

ネスト化により、セレクタを繰り返す手間が省けます。また、関連する要素のスタイルルールを同じ場所に配置できます。また、スタイルはスタイルにマッチし、 HTML前の例の .nesting コンポーネントが削除したい場合は、検索する代わりにグループ全体を削除すれば、関連セレクタインスタンスのファイル。

ネストのメリット: - 組織 - ファイルサイズの縮小 - リファクタリング

準備課程は Chrome 112 以降で利用できます。また、Safari テクニカルプレビュー 162 で試すこともできます。

CSS ネストのスタートガイド

この投稿の残りの部分では、次のデモサンドボックスを使用して、選択内容を可視化します。このデフォルトの状態では、何も選択されず、すべてが可視化されます。さまざまな形やサイズから構文を試し、実際の動作を見てみましょう。

大小の円、三角形、正方形のカラフルなグリッド。

サンドボックスの内側には、円、三角形、四角形があります。小規模、中規模、大きくなりますその他は青、ピンク、紫色です。どれも.demoの中にありますあります。これは、ユーザーが作成する HTML 要素のプレビューです。ターゲティングできます

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

ネストの例

CSS のネストを使用すると、選択します

.parent {
  color: blue;

  .child {
    color: red;
  }
}

この例では、.child クラスセレクタが内部にネストされています。 .parent クラスセレクタ。つまり、ネストされた .child セレクタは .parent クラスを持つ要素の子要素にのみ適用されます。

この例では、明示的に & 記号を使用して、親クラスの配置場所を示します。

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

これら 2 つの例は機能的に同等であり、オプションがある理由も説明します。この記事では、より高度な例を挙げるにつれて、より明確になります。

円の選択

最初の例では、タスクは、フェードおよびぼかしを入れるスタイルを円で囲みます。

ネストなしの場合、現在の CSS は次のようになります。

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

ネストを使用する場合、次の 2 つの方法があります。

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

または

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

結果: .circle クラスを持つ .demo 内のすべての要素は次のようになります。ぼやけてほとんど見えません。

図形のカラフルなグリッドに円がなくなりました。
背景がぼやけています。 — </ph> <ph type="x-smartling-placeholder"></ph> デモを試す

任意の三角形と正方形を選択する

このタスクでは、複数のネストされた要素（グループセレクタとも呼ばれる）を選択する必要があります。

ネストなしの場合、現在の CSS には次の 2 つがあります。

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

または、:is() を使用します。

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

ネストを使用するには、次の 2 つの方法があります。

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

または

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

結果、.demo 内には .circle 要素のみが残ります。

カラフルな図形のグリッドは、円だけを残し、
他の形はほとんど見えません。 — </ph> <ph type="x-smartling-placeholder"></ph> デモを試す

大きな三角形や円を選択する

このタスクには複合セレクタが必要です。ここで、要素が選択されるには、両方のクラスが存在する必要があります。

ネストなしの場合、現在の CSS は次のようになります。

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

または

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

ネストを使用するには、次の 2 つの方法があります。

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

または

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

結果、すべての大きな三角形と円が .demo 内に非表示になります。

カラフルなグリッドでは、小型と中程度の図形しか見えません。 — </ph> <ph type="x-smartling-placeholder"></ph> デモを試す

複合セレクタとネストに関する上級者向けのヒント

ネストされた結合方法が明示的に示されているため、ここでは & 記号が有用です。あります。たとえば次のようになります。

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

ネストには有効な方法ですが、結果は期待する要素とは一致しません。これは、組み合わせた .lg.triangle, .lg.circle の望ましい結果を & で指定しなければ、実際の結果は .lg .triangle, .lg .circle になるからです。子孫セレクタ。

重要な用語: & を指定せずにクラスをネストすると、必ず子孫セレクタが生成されます。結果を変更するには、& 記号を使用します。

ピンク色の図形を除くすべての図形を選択しています

このタスクでは、否定関数疑似クラスが必要です。ここで、要素を使用してはいけません。確認します。

ネストなしの場合、現在の CSS は次のようになります。

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

ネストを使用するには、次の 2 つの方法があります。

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

または

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

結果、ピンク以外のすべてのシェイプが .demo 内に非表示になります。

カラフルなグリッドがモノクロになり、ピンクの図形のみが表示されています。 — </ph> <ph type="x-smartling-placeholder"></ph> デモを試す

`&` による精度と柔軟性

:not() セレクタで .demo をターゲットにしたいとします。& は必須です。必要があります。

.demo {
  &:not() {
    ...
  }
}

これは、.demo と :not() が .demo:not() を兼ね備えています。 .demo :not() を必要とする例です。このリマインダーは :hover インタラクションをネストしたい。

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

その他のネスト例

ネストの CSS 仕様は次のとおりです。多くの例が満載です。構文を詳しく知りたい方は、有効な例と無効な例を幅広く取り上げています。

次のいくつかの例では、CSS ネスト機能を簡単に紹介して、導入する機能の幅広さを理解できます。

@media のネスト

スタイルシートで目的のものを見つけるために別の領域に移動すると、セレクタとそのスタイルを変更するメディアクエリ条件です。注意をそらすのはコンテキスト内で条件をネストする機能がなくなります。

構文の便宜上、ネストされたメディアクエリでスタイルを変更するだけの場合は、現在のセレクタのコンテキストでは、最小限の構文を使用できます。

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

& を明示的に使用することもできます。

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

この例は、.large をターゲットにし、& を使用して拡張された構文を示しています。追加のネスト機能が引き続き動作することを示す必要があります。

詳しくは、@rules のネストをご覧ください。

ネストできる場所

ここまでの例はすべて、前のコンテキストに継続されている、または前のコンテキストに追加されたものです。必要に応じて、コンテキストを完全に変更または並べ替えることができます。

.card {
  .featured & {
    /* .featured .card */
  }
}

& 記号は、文字列ではなくセレクタオブジェクトへの参照を表します。ネストされたセレクタ内の任意の場所に配置できます。複数の場所に配置することも回:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

この例は少し役に立たないようですが、セレクタのコンテキストを繰り返すことができると便利です。

無効なネストの例

予期しないネスト構文のシナリオがいくつかありますが、無効である可能性があります。ネストしている場合です

ネストと連結

多くの CSS クラスの命名規則では、ネストや連結、セレクタを文字列のように追加します。これは CSS のネストでは機能しません。セレクタは文字列ではなくオブジェクト参照です

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

詳しくは、仕様をご覧ください。

厄介なネストの例

セレクタリストと `:is()` 内でのネスト

次のような CSS ブロックをネストする場合を考えてみましょう。

.one, #two {
  .three {
    /* some styles */
  }
}

これはセレクタリストで始まり、さらにネストする最初の例です。これまでの例はセレクタリストでのみ終了していました。このネスト例に無効なものはありませんが、セレクタリスト（特に ID セレクタを含むリスト）内のネストについては、実装の詳細が複雑になる可能性があります。

ネストのインテントが機能するように、最も内側のネストではないセレクタリストは、ブラウザによって :is() でラップされます。このラッピングにより、作成されたコンテキスト内でセレクタリストのグループ化が維持されます。このグループ化 :is(.one, #two) の副作用は、かっこ内のセレクタ内で最高スコアの特異性が適用されることです。:is() は常にこのように機能しますが、ネスト構文を使用すると、作成されたものとは一致しないので驚くかもしれません。コツの要約ID とセレクタリストとのネストでは、特異性が非常に高いセレクタになる可能性があります。

厄介な例をわかりやすくまとめると、次のように前のネストブロックがドキュメントに適用されます。

:is(.one, #two) .three {
  /* some styles */
}

ID セレクタを使用しているセレクタリスト内でネストする場合、そのセレクタリスト内のすべてのネストの特異性が高くなるので、注意するか、リンターに警告するように指示してください。

ネストと宣言の混在

次のような CSS ブロックをネストする場合を考えてみましょう。

.card {
  color: green;
  & { color: blue; }
  color: red;
}

.card 要素の色は blue になります。

混在しているスタイル宣言は、あたかもそれらが自動的に作成されます。詳細については、仕様をご覧ください。

これを回避する方法はあります。以下は、& の 3 つの色スタイルをラップしています。作成者が意図したとおりにカスケードの順序が維持されます色 .card 要素は赤色で表示されます。

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

実際、ネストの後に続くスタイルはすべて & でラップすることをおすすめします。

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

機能検出

CSS のネストの機能を検出するおすすめの方法には、ネストを使用する方法と @supports: ネストセレクタの解析機能を確認します。

お使いのブラウザが対応しているかどうかを尋ねる Bramus Codepen のデモのスクリーンショット
CSS のネスト。その質問の下には緑色のボックスがあり、サポートしていることを示します。

ネストを使用する場合:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

使用中: @supports

@supports (selector(&)) {
  /* nesting parsing available */
}

同僚の Bramus がこの戦略について説明している優れた Codepen です。

Chrome DevTools によるデバッグ

現在のところ、DevTools のネストのサポートは最小限です。現在、スタイルは想定どおりに [Styles] ペインに表示されますが、ネストがトレースされます。その完全なセレクタコンテキストはまだサポートされていません。2022 年には透明性と透明性を確保する必要があります

Chrome DevTools のネスト構文のスクリーンショット。

Chrome 113 では、CSS のネストに対する追加サポートが予定されています。最新情報を随時ご確認ください。

今後について

CSS ネストはバージョン 1 のみです。バージョン 2 では、糖衣構文が増え、ルールの数が減る可能性もあります。覚えておいてください。ネストの解析を制限しないことが多くの要望がある難しいこともあります

ネストは、CSS 言語の大きな機能強化です。オーサリングに影響がある CSS のほぼすべてのアーキテクチャ要素に適用されますこの大きな影響はバージョン 2 を指定する前に検証、理解しておく必要がある。

最後に、こちらのデモをご覧ください。これは、@scope、ネスト、@layer をすべてまとめて使用するものです。みんな、とてもワクワクするわ！

グレーの背景に明るいカード。カードにはタイトルとテキストがあり
いくつかの操作ボタン、サイバーパンクスタイルの画像などです

CSS ネスト

CSS ネストのスタートガイド

ネストの例

円の選択

任意の三角形と正方形を選択する

大きな三角形や円を選択する

複合セレクタとネストに関する上級者向けのヒント

ピンク色の図形を除くすべての図形を選択しています

& による精度と柔軟性

その他のネスト例

@media のネスト

ネストできる場所

無効なネストの例

ネストと連結

厄介なネストの例

セレクタリストと :is() 内でのネスト

ネストと宣言の混在

機能検出

Chrome DevTools によるデバッグ

今後について

`&` による精度と柔軟性

セレクタリストと `:is()` 内でのネスト