同一の要素に複数クラスがある場合
<!-- HTML -->
<button class="container__btn btn--filled">ボタン</button>
/* CSS */
.container__btn.btn--filled:hover {
color: white;
background-color: black;
}
CSSはcontainer__btn
とbtn--filled
の2つのクラスが適用されている、
かつホバー状態
のときに適用される
親要素に対して子要素に特定のクラスがある場合
<!-- HTML -->
<div class="container__btn">
<button class="btn--filled">ボタン</button>
</div>
/* CSS */
.container__btn .btn--filled:hover {
color: white;
background-color: black;
}
CSSは親要素にcontainer__btn
のクラスがあるかつ、
対象の要素にbtn--filled
クラスがあるかつ、
ホバー状態
のときに適用される