＆（アンパサンド）入れ子セレクターの使い方

前回CSSネストについて解説しましたが、入れ子セレクター（＆）についてさらに深掘りします。古い環境への対応としての役割もありますが非常に便利に使えます。

＆入れ子セレクターによる親子ルール明示

こちらは前回の記事も踏まえた使い方です。主に古い環境への適用としての役割です。

header {
width: 100%;
& nav {
dislay: flex;
& a {
color: red;
}
}
}

古い環境の場合、CLASSやIDには入れ子セレクター（＆）なしでも有効ですが、HTMLタグの場合は入れ子セレクター（＆）が必要です。

header {
width: 100%;
.logo {
dislay: flex;
& a {
color: red;
}
}
}

:hoverや擬似要素（::before・::after）への対応

:hoverなどの擬似クラスや::before・::afterといった擬似要素にCSSネストを適用させる場合は入れ子セレクター（＆）を使います。


/* 例1: ネストなし */
.button:hover {
background-color: red;
}
.button::before {
content: "!";
}

/* 例2: CSSネストあり */ .button {
&:hover {
background-color: red;
}
&::before {
content: "!";
}
}

直前の親要素を入れ子セレクター（＆）に置き換えることになるので視認性も良く、CSSの軽量化にもなります。個人的には使い勝手が良く重宝しています。

なお、CSSネストをそのまま書くよりも、入れ子セレクター（＆）を適切に使ったほうが 構造が明確になり不要なコードを削減できます。


/* 例: `&` を使った親要素指定 */
.card {
&.primary {
background: blue;
}
&.secondary {
background: gray;
}
}

親要素による使い分けもネスト可能

入れ子セレクター（＆）で親要素を限定化した記述も可能です。これ、初めて使った時に感動しました。


/* 例: 通常は青、特定の場合はグレー */
.card {
background: blue;

.secondary & {
background: gray;
}
}

既存のCSSをCSSネストへ手作業で変換する際に助かります。まあ手作業では変換しないと言われてしまうと言葉がありませんが。

メディアクエリとの連携

CSSネスト内にメディアクエリを挿入、入れ子セレクター（＆）と連携することで管理性を高められます。

.button {
background: blue;

@media (max-width: 752px) {
& {
background: red;
}
}
}

PCの場合は青、スマホの場合は赤という表現が一つのブロックで完結できます。ただ、弊社ではPC・スマホをそれぞれ別CSSにて管理しているのでメディアクエリとの連携は使うことは少ないです。

入れ子セレクター（＆）についてもう少し深掘りもできそうですが、記事テーマが変わりそうなのでここまでとします。