📝

[CSS]同一要素に複数クラスが適用されるのか、親要素から子要素にクラス階層が出来ているのか[セレクター]

に公開
ｃｓｓ
tech

同一の要素に複数クラスがある場合

<!-- 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クラスがあるかつ、
ホバー状態のときに適用される

Discussion