Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

E:hover + E, E:hover ~ E

E:hover + E では、当たり前のことなんだけど 隣接セレクターは直後の要素にしかスタイルが適用されない ので .box2 にだけスタイルが適用されて、 .box3 の背景色は変わらない。E:hover ~ E では .box 以下の .box2.box3 両方にスタイルが適用される。

/* E:hover + E */
.box:hover + .box2,
.box:hover + .box3 {
  background-color: blue;
}

/* E:hover ~ E */
.box:hover ~ .box2,
.box:hover ~ .box3 {
  background-color: blue;
}

隣接セレクターが直後の要素だけに適用されることとかすぐ忘れるし、普段使わないセレクターを使うとちょっとしたことでつまづく。