styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS
![styled-components の :&>before(記号) まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3150f61aef3ab4d09c7830f8d10284545de5578f/height=288;version=1;width=512/https%3A%2F%2Fblog.ojisan.io%2Fstatic%2Fb1a4255fecfa3a88b19d193026911be9%2F7439d%2Fvisual.png)