css-&、連結セレクター、子孫セレクターの使用法

&

&はネストの上位を表します。これはSassの構文であり、上位のセレクターを表します。

.btn {
  &.primary {
    background-color: #007bff;
    color: #fff;
  }
}

コンパイルされた結果は、2 つのクラス名を持つ同じ要素であり、2 つのクラス名の間にスペースはありません。

.btn.primary {
   background-color: #007bff;
   color: #fff;
}

シリーズセレクター

同じラベルに基づいて行動する

<div class=”a” id ="qq">
	<span>look at the color</span>
</div>
<style> 
	#qq.a{
		...
	}
</style>

子孫セレクター

さまざまなラベルに基づいて活動する

<div id ="qq">
	<span class=”a”>look at the color</span>
</div>
<style> 
	#qq .a{
		...
	}
</style>