とほほのCSSネスティング入門

トップ > アラカルト > CSSネスティング

サポート状況の詳細は下記を参照してください。

例えば、次のようなCSSがあります。

これまでのCSS

.parent .child {
  color: red;
}

これを次のように記述することができます。

CSSネスティング

.parent {
  .child {
    color: red;
  }
}

これまでのCSS

.parent > .child {
  color: red;
}

CSSネスティング

.parent {
  > .child {
    color: red;
  }
}

ネストされたCSSにタグ名を使用する場合は、下記の様にネスティングセレクタ & を記述する必要があります。

CSSネスティング

.parent {
  & p {           /* .parent p と解釈される */
    color: red;
  }
}

疑似クラス(:) や疑似要素(::) を用いる場合もネスティングセレクタ(&)が必要です。

CSSネスティング

a {
  &:link { color: #00f; }       /* a:link */
  &:visited { color: #66f; }    /* a:visited */
  &:hover { color: #f00; }      /* a:hover */
}

初版:2023年5月7日最終更新:2023年9月3日

http://www.tohoho-web.com/ex/css-nesting.html