CSS Reference

入れ子セレクタ

スタイル宣言を入れ子にして記述する

CSS Nesting Module により、CSS でスタイル宣言を入れ子にして記述することが可能になりました。元々、CSS プリプロセッサである Sass や Less で馴染みのある入れ子の記述を、コンパイルせずに利用できるという点で便利なだけでなく、より効率的、かつ直感的に理解しやすく、メンテナンス性の高い CSS の記述が可能になります。

詳細説明

例えば、下記のような記述が可能です。

.foo {
  color: red;

  a {
    color: blue;
  }
}

.foo02 {
  color: green;

  + .bar {
    color: yellow;
  }
}

上記の入れ子記述は、下記のように解釈されます。

.foo {
  color: red;
}
.foo a {
  color: blue;
}

.foo02 {
  color: green;
}
.foo02 + .bar {
  color: yellow;
}

`&` セレクタ

& セレクタを使用して、A かつ B にマッチさせる記述も可能です。

.foo {
  color: red;

  &:hover {
    color: blue;
  }
}

上記の入れ子記述は、下記のように解釈されます。

.foo {
  color: red;
}
.foo:hover {
  color: blue;
}

他に、& セレクタを使用するシチュエーションとしては下記のようなものがあります。

.foo {
  color: blue;
  &.bar {
    color: red;
  }
}

.foo02, .bar02 {
  color: green;
  + .baz, &.qux {
    color: yellow;
  }
}

上記の入れ子記述は、下記のように解釈されます。

.foo {
  color: blue;
}
.foo.bar {
  color: red;
}

.foo02, .bar02 {
  color: green;
}
:is(.foo02, .bar02) + .baz,
:is(.foo02, .bar02).qux {
  color: yellow;
}

さらに複雑な記述例

& セレクタを使用することで様々なスタイルを簡素に記述できます。

.foo {
  color: red;
  .parent & {
    color: blue;
  }
}

上記の入れ子記述は、下記のように解釈されます。

.foo {
  color: red;
}
.parent .foo {
  color: blue;
}

下記のような記述も可能です。

.foo {
  color: red;
  :not(&) {
    color: blue;
  }
}

上記の入れ子記述は、下記のように解釈されます。

.foo {
  color: red;
}
:not(.foo) {
  color: blue;
}

@規則内での使用

@media 規則や @layer 規則などと組み合わせても使用できます。

.foo {
  display: grid;

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

    @media (min-width > 1024px) {
      max-inline-size: 1024px;
    }
  }
}

上記の入れ子記述は、下記のように解釈されます。

.foo {
  display: grid;
}

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

@media (orientation: landscape) and (min-width > 1024px) {
  .foo {
    max-inline-size: 1024px;
  }
}

下記のような記述も考えられます。

html {
  @layer base {
    block-size: 100%;

    @layer support {
      & body {
        min-block-size: 100%;
      }
    }
  }
}

上記の入れ子記述は、下記のように解釈されます。

@layer base {
  html {
    block-size: 100%;
  }
}
@layer base.support {
  html body {
    min-block-size: 100%;
  }
}