ネスト

CSS スタイルルールのネストにより、スタイルシートを整理し、読みやすく、保守しやすくすることができます。

概要

セレクタについて学習したので、スタイルシートでセレクタをより適切に整理する方法について疑問に思っているかもしれません。サイトの「機能」セクション内の項目にスタイルを適用するとします。ネストを使用すると、これらのスタイルを次のように .feature ルール内にグループ化できます。

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

これは、各スタイルを個別に記述するのと同じです。

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

ネストは、必要に応じて何層でも深くできます。

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

グループ化とリレーションシップの確立

ネストを使用すると、スタイルルールのグループ化と関係の確立をより簡潔に行うことができます。

ネストされたルールは、デフォルトで外側のルールに子孫結合子として関連付けられます。ネストされたルールのセレクタを使用して、関係を変更します。

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

& セレクタを使用して明示的な関係を定義する

& セレクタを使用して、スタイルルールのネストをより明示的にすることもできます。& は親セレクタを表す記号と考えることができます。

.feature {
 & button {
    color: blue;
  }
}

これは、次のようにスタイルを記述するのと同じです。

.feature button {
  color: blue;
}

& が必要な場合

& がない場合、ネストされたセレクタは親セレクタの子孫セレクタになります。複合セレクタを形成するには、& が必要です。

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

コンテキストを変更して、& セレクタを子セレクタの末尾または両側に配置することもできます。


/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

最後の例では、.my-component クラスを持つ要素内の画像にスタイルを追加しています。これは、要素に class や id を追加できないプロジェクトに取り組んでいる場合に便利です。

ネストと特異性

:is() と同様に、ネストセレクタは親のセレクタ リストで最も特異性の高いセレクタの特異性を取得します。

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

最初のルールは、#main-header 要素と .intro 要素内のすべてのリンクを対象とし、それらを緑色にします。

2 つ目のルールは、この設定をオーバーライドして .intro 要素内のリンクを青色にしようとしています。

各ルールの特異性を確認すると、この方法が機能しない理由がわかります。

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

最初のルールにはセレクタ リストに id が含まれており、ネストされたルールは最も具体性の高いセレクタの具体性を継承するため、2 番目のルールよりも具体性が高くなります。#main-header セレクタを持つ要素内にない a 要素の場合でも、リンクは緑色で表示されます。

無効なネスト

:is() と同様に、ネストセレクタは疑似要素を表すことができません。

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

blockquote とその疑似要素の両方に navy の色のテキストと枠線が表示されることを期待するかもしれませんが、実際にはそうなりません。& セレクタは疑似要素を表すことができないため、ネストされたボーダー スタイルは blockquote にのみ適用されます。

& と型セレクタを使用して複合セレクタを作成する場合、型セレクタを最初に指定し、間に空白文字を入れないようにする必要があります。

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

このルールにより、CSS ネストを Sass などのプリプロセス ツールと連携させることができます。Sass で &p と記述すると、親セレクタがネストされた型セレクタに追加され、結果は .featurep になります。

@規則のネスト

@container、@media、@supports、@layer などの CSS 条件付きグループ ルールもネストできます。

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

理解度を確認する

CSS ネスティングを使用する場合、& セレクタは何を表しますか？

ネストされた子セレクタ
不正解です。
親セレクタ
正解です。
最も近い兄弟セレクタ
不正解です。

ネストできるのは 2 階層までです。

正しい
不正解です。
誤り
正解です。

どの @ 規則をネストできますか？

@media
正解です。
@container
正解です。
@import
不正解です。
@supports
正解です。
@layer
正解です。