前回までで、子孫セレクタ、隣接セレクタ、間接セレクタ、直下セレクタをネストして書く方法を解説しました。
ここまでは、HTMLの構造的にも親子関係や兄弟関係にあるタグに対して、ネストの親子関係を使って記述してきました。

それでは、同じタグに複数のクラスを指定する場合や、hoverなどの疑似クラスをネストを使って書けないでしょうか？　
実はこれらもネストを使って書くことができます。
そこで使うのが、「親セレクタの参照」です。

複数のクラスを指定する場合

一つの要素に複数のクラスを適用したスタイルを指定する場合を考えます。
例えば、このように、btnというクラスを適用すると角丸四角形のボタンになり、さらにredクラスを適用すると赤いボタンに、greenクラスを適用すると緑のボタンになるというパターンです。

btnクラスが共通していますが、これをネストを使って書くことができます。
このような場合のネストには、親セレクタの参照、＆（アンパサンド）記号を使ってこのように書きます。

&（アンパサンド）記号が、すぐ上の親のセレクタで置き換わるイメージを持つとわかりやすいかもしれません。

親セレクタの参照はセレクタの前だけでなく、後ろにも接続することができます。
この例は、サイドエリアの横幅をトップページだけ300pxにしたい場合です。

わかりにくいかもしれませんが、これをコンパイルした結果のCSSは下記のようになります。

疑似クラス、疑似要素で使う場合

親セレクタは擬似クラスや擬似要素の前にも書くことができます。
例えば、aタグのhoverをネストで書くとこのようになります。
また、hover以外にも、first-child、before、afterなどにも適用できます。

CSS設計でBEMなどを採用している場合、親セレクタの参照を使ってネストして書くことによって、記述量を減らし、構造的に記述することができるようになります。
親セレクタの参照は複数使うこともできるので、このように書くことで、階層を深くすることができます。

親セレクタの参照は、すぐ上の親のセレクタと置き換えられるので、上記のSassをコンパイルすると下記のようになります。