迷いやすい、CSSセレクタの使い方

たった ␣ スペースの有無なのに、意味が全然変わってくる💡
しっかり覚えて上手に使おう！🙌

---

␣ スペースがある場合:

.parent .child { }

✍️ 意味:  "parent"クラスの中にある、子孫要素 "child" にCSSを当てて！
📝 例:  <div class="parent"><span class="child"></span></div>

💡 ポイント：親子のように、階層関係をつけて指定するイメージ。
"parent"と"child"を逆の順番で書かないように注意！

␣ スペースがない場合:

.parent.child { }

✍️ 意味:  "parent・child" 両方のクラスを持つ要素にCSSを当てて！
📝 例:  <div class="parent child"></div>

💡 ポイント：数学で出てくる ”かつ(and)” のようなイメージ

参考：
1 https://wp-p.info/tpl_rep.php?cat=css-intermediate&fl=r2#google_vignette
2 https://t-file.blog/programming/351/
3 https://www.koikikukan.com/archives/2011/06/16-000616.php