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">

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

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

ネストなしの場合、現在の 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">

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

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

ネストなしの場合、現在の 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">

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

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

.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">

& による精度と柔軟性

: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: ネスト セレクタの解析機能を確認します。

ネストを使用する場合:

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

  .no-nesting {
    display: none;
  }
}

使用中: @supports

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

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

Chrome DevTools によるデバッグ

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

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

今後について

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

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

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