【CSS】 セレクターの記述に「ネスト（入れ子）」を使う

こんにちは、さち です。

今回は、「CSS」の記述で「ネスト（入れ子）」を使う方法について書いていきます。（備忘録です）

ピュア CSS で使えるので事前準備は不要！　すぐ使えますよ。

ネストの使い方

「子孫セレクタ」の絞り込みを、「ネスト」を使って書くことができます。

/* 一般的な CSS */
.sample > p { color: #222; }
.sample pre { background: #900; }
.sample .el { font-weight: bold; }

/* ネストを使って書く */
.sample {
  > p { color: #222; }
  pre { background: #900; }
  .el { font-weight: bold; }
}

/* 旧仕様対応のブラウザー（※後述）は HTMLタグ に「&」が必要 */
.sample {
  & > P { color: #222; }
  & pre { background: #900; }
  .el {font-weight: bold; }
}

疑似クラスは「&」が必須

「擬似クラス」「疑似要素」にネストを使うときは、& が必須です。注意して下さい。

/* 一般的な CSS */
a:hover  { color: red; }
a::after { content: "\f14d"; }

/* ネストを使って書く */
a {
  &:hover  { color: red; }
  &::after { content: "\f14d"; }
}

また & と「疑似クラス/要素」の間にスペースを入れると動作しません。つまり、& :hover はNGで、&:hover はOKです。

対応ブラウザー

「Can I use...」によると、CSS ネストの対応は下の表のとおりです。

私は主に自分専用の「ユーザーCSS」でネストを使っていますが、対応ブラウザーも多くなってきたのでサイト作成でも使えそうですね。

「旧仕様」対応のバージョンでは、「HTMLタグ（要素の種類）」をそのまま記述してネストする場合に & が必要です。（※前述）

& の必要／不要を考えるのが面倒であれば、すべてのネストに & を付けてしまいましょう。（ & を付けてはいけないネストはないので、正常に動作します）