CSS 入れ子アットルール

入れ子にすることができるアットルール

• @media
• @supports
• @layer
• @scope
• @container
• @starting-style

例

入れ子の @media アットルール

この例には CSS のブロックが 3 つあります。 1 つ目は典型的な入れ子アットルールの書き方を表し、 2 つ目はブラウザーが構文解析するとおりに入れ子を展開した書き方を表し、 3 つ目は入れ子でない同等のものを表しています。

入れ子の CSS

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}

展開した入れ子 CSS

.foo {
  display: grid;
  @media (orientation: landscape) {
    & {
      grid-auto-flow: column;
    }
  }
}

入れ子を使用しない同等のもの

.foo {
  display: grid;
}

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

多重に入れ子になった @media アットルール

アットルールは他のアットルールの中に入れ子にすることができます。以下にその例と、入れ子にしない場合の書き方を示します。

入れ子のアットルール

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (width >= 1024px) {
      max-inline-size: 1024px;
    }
  }
}

入れ子を使用しない同等のもの

.foo {
  display: grid;
}
@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
@media (orientation: landscape) and (width >= 1024px) {
  .foo {
    max-inline-size: 1024px;
  }
}

カスケードレイヤーの入れ子 (@layer)

カスケードレイヤーは子レイヤーを作成するために入れ子にすることができます。これらは . （ドット）で接続します。

親＆子レイヤーの定義

まず、名前付きカスケードレイヤーを使用する前に、スタイル割り当てなしで定義します。

@layer base {
  @layer support;
}

ルールを入れ子になったレイヤーに割り当てる

ここでは .foo セレクターはそのルールを base @layer に割り当てています。入れ子になった support @layer は base.support サブレイヤーを作成し、 & 入れ子セレクターは .foo .bar セレクターのルールを作成するために使用されます。

.foo {
  @layer base {
    block-size: 100%;
    @layer support {
      & .bar {
        min-block-size: 100%;
      }
    }
  }
}

入れ子を使用しない同等のもの

@layer base {
  .foo {
    block-size: 100%;
  }
}
@layer base.support {
  .foo .bar {
    min-block-size: 100%;
  }
}

関連情報

• CSS 入れ子モジュール
• & 入れ子セレクター
• CSS 入れ子の使用
• 入れ子と詳細度
• 入れ子コンテナークエリー