CSSネスティングモジュール

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

.foo {
  color: red;

  .bar {
    color: blue;
  }
}

有効であり、次と同等になります：

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

入れ子規則では 入れ子セレクター を使って親規則で一致した要素を直接参照したり、 相対セレクター構文を使って「子孫」以外の関係も指定できます。

.foo {
  color: red;

  &:hover {
    color: blue;
  }
}

/* 次と同等： */

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

.foo {
  color: red;

  + .bar {
    color: blue;
  }
}

/* 次と同等： */

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

div {
  color: red;

  input {
    margin: 1em;
  }
}
/* 「input」は識別子なので無効 */

このようなセレクターも書くことはできますが、少し書き換える必要があります：

div {
  color: red;

  & input { margin: 1em; }
  /* 有効、識別子で始まらない */

  :is(input) { margin: 1em; }
  /* 有効、コロンで始まり、
     前の規則と同等 */
}

/* & は単独でも利用可能 */
.foo {
  color: blue;
  & > .bar { color: red; }
  > .baz { color: green; }
}
/* 同等：
  .foo { color: blue; }
  .foo > .bar { color: red; }
  .foo > .baz { color: green; }
*/


/* 複合セレクターで、親のセレクターを絞り込む */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* 同等：
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* セレクターリストの複数のセレクターはすべて親に相対 */
.foo, .bar {
  color: blue;
  + .baz, &.qux { color: red; }
}
/* 同等：
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & は1つのセレクター内で複数回使用可能 */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* 同等：
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* & はセレクターの先頭でなくてもよい */

.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; }
*/

/* 相対セレクターを使う場合、
  先頭の & は自動的に暗黙指定される */

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

/* 同等：
  .foo { color: red; }
  .foo + .bar + .foo { color: blue; }
*/

/* ちょっと変ですが、& 単独でも利用可能 */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* 同等：
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // または

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* さらに、& の重複も可能 */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* 同等：
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* 親セレクターは任意に複雑にできる */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* 同等：
  :is(.error, #404):hover > .baz { color: red; }
*/

.ancestor .el {
  .other-ancestor & { color: red; }
}
/* 同等：
  .other-ancestor :is(.ancestor .el) { color: red; }

/* 入れ子セレクターも複雑にできる */
.foo {
  & :is(.bar, &.baz) { color: red; }
}
/* 同等：
  .foo :is(.bar, .foo.baz) { color: red; }
*/

/* 入れ子の多段構造ではセレクターが積み重なる */
figure {
  margin: 0;

  > figcaption {
    background: hsl(0 0% 0% / 50%);

    > p {
      font-size: .9rem;
    }
  }
}
/* 同等：
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/
		
/* Cascade Layersの利用例 */
@layer base {
  html {
    block-size: 100%;

    & body {
      min-block-size: 100%;
    }
  }
}
/* 同等：
  @layer base {
    html { block-size: 100%; }
    html body { min-block-size: 100%; }
  }
*/

/* Cascade Layersの入れ子利用例 */
@layer base {
  html {
    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%; }
  }
*/
		
/* Scopingの利用例 */
@scope (.card) to (> header) {
  :scope {
    inline-size: 40ch;
    aspect-ratio: 3/4;
				
    > header {
      border-block-end: 1px solid white;
    }
  }
}
/* 同等：
  @scope (.card) to (> header) {
    :scope { inline-size: 40ch; aspect-ratio: 3/4; }
    :scope > header { border-block-end: 1px solid white; }
  }
*/

/* Scopingの入れ子利用例 */
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

  @scope (&) to (> header > *) {
    :scope > header {
      border-block-end: 1px solid white;
    }
  }
}

/* 同等：
  .card { inline-size: 40ch; aspect-ratio: 3/4; }
  @scope (.card) to (> header > *) {
    :scope > header { border-block-end: 1px solid white; }
  }
*/

ただし、次のような場合は無効です：

/* セレクターが識別子で始まる */
.foo {
  color: blue;
  div {
    color: red;
  }
}

/* プロパティを直接利用可能 */
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
/* 同等：
  .foo {
    display: grid;
				
    @media (orientation: landscape) {
      & {
        grid-auto-flow: column;
      }
    }
  }
*/

/* 最終的な同等：
  .foo { display: grid; }

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

/* 条件付き規則はさらに入れ子にできる */
.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;
    }
  }
*/

/* Cascade Layersの入れ子例 */
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%; }
  }
*/

/* Scopingの入れ子例 */
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

  @scope (&) {
    :scope {
      border: 1px solid white;
    }
  }
}

/* 同等：
  .card { inline-size: 40ch; aspect-ratio: 3/4; }
  @scope (.card) {
    :scope { border-block-end: 1px solid white; }
  }
*/

例えば、先ほどの例：

.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
/* 同等：
  .foo {
    display: grid;

    @media (orientation: landscape) {
      & {
        grid-auto-flow: column;
      }
    }
  }
*/

は、まさに同等であり、CSSOM構造も全く同じになります。 CSSMediaRule オブジェクトには CSSStyleRule オブジェクトが1つあり、 その.childRules属性内に grid-auto-flowプロパティが含まれます。

.parent {
  color: blue;

  @scope (& > .scope) to (& .limit) {
    & .content {
      color: red;
    }
  }
}

次のように同等です：

.parent { color: blue; }
@scope (.parent > .scope) to (.parent > .scope .limit) {
  .parent > .scope .content {
    color: red;
  }
}

article {
  color: green;
  & { color: blue; }
  color: red;
}

/* 同等 */
article {
  color: green;
  color: red;
  & { color: blue; }
}

.foo, .foo::before, .foo::after {
  color: red;

  &:hover { color: blue; }
}

&は .fooで一致した要素のみを表し、 次のように同等です：

.foo, .foo::before, .foo::after {
  color: red;
}
.foo:hover {
  color: blue;
}

#a, b {
  & c { color: blue; }
}
.foo c { color: red; }

次のようなDOM構造の場合：

<b class=foo>
  <c>Blue text</c>
</b>

このテキストは青色になります。 &の詳細度は #a（[1,0,0]）と b（[0,0,1]）のうち大きい方で[1,0,0]、 & cセレクター全体では[1,0,1]となり、 .foo c（[0,1,1]）より大きくなります。

これは、入れ子を手動展開した場合の結果とは異なります。 展開した場合はcolor: blueは b c（[0,0,2]）で一致し、 #a c（[1,0,1]）ではありません。

同じ意味でdiv&とも書けますが、 これは入れ子スタイル規則の先頭としては無効ですが、セレクターの途中なら使用可能です。