styled-components で書かれた &&& の意味は?

Question

react & CSS を勉強中です.

以下のソースがあったとして

 1: const Table = styled.div`
 2:   &&& {
 3:     > div:first-child {
 4:         // ...
 5:     }
 6:     &.bar {
 7:         // ...
 8:     }
 9:   }
10:`

Q1: 2行目の 「&&&」 は !import の意味と理解していますが、あっていますか? また、ドキュメントはどこにありますか?

Q2: 3行目の 「>」 は普通のCSS の 子結合子 の理解でよいですか?

Q3: 6行目の 「&.」 はどういう意味ですか?

Answer 1

React はほとんど触ったことがないので、間違っていたらすみません。

---

Q1
違うのではないでしょうか。
アンパサンドは自分自身を表すとのこと。三重にして詳細度を上げているのでは？

Finally, the ampersand can be used to increase the specificity of rules on the component

styled-components: Basics

---

Q2
ご理解の通りかと思います。

---

Q3
アンパサンドは自分自身を表すとのこと。

The ampersand (&) can be used to refer back to the main component.

styled-components: Basics

ドットはクラスを表します。

CSS のクラスセレクターは、 class 属性の内容に基づいて要素を選択します。

クラスセレクター - CSS: カスケーディングスタイルシート | MDN

Comments

[naserehari]

すみません、「三重にして詳細度を上げている」の部分をもう少し具体的に教えていただけると幸いです

[Lhankor_Mhy]

コンポーネントが .component だとすると、
& は .component なので、
&&& は .component.component.component になるので、詳細度が 030 になるということです。

CSS詳細度についてご存じないようでしたら、こちらを参照してください。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

[naserehari]

ご丁寧に説明頂きありがとうございます。勉強します!