[解決済み] CSSセレクタの"~"（チルダ／スクイグル／ツイドル）はどういう意味ですか？

質問

を検索する ~ という文字は、簡単ではありません。あるCSSに目を通したところ、こんなものがありました。

.check:checked ~ .content {
}

どういう意味ですか？

どのように解決するのですか？

その ~ セレクタは、実際には 一般的な兄弟コンビネータ (で Subsequent-sibling コンビネータに改名）。 セレクタレベル4 ):

一般的な兄弟コンビネータは、"tilde" (U+007E, ~)でできています。 文字で、2つの単純なセレクタの列を区切ります。この文字で 2つのシーケンスで表される要素は、同じ親を共有します。 ドキュメントツリーで、最初のシーケンスで表される要素は で表される要素の前に（必ずしも即座にでなくとも）先行する。 の2つ目である。

次のような例を考えてみましょう。

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b は、4番目と5番目のリストアイテムにマッチするからです。

• は .b 要素
• の兄弟である。 .a
• の後に表示されます。 .a をHTMLソースの順番で表示します。

同じく。 .check:checked ~ .content は、すべての .content の兄弟である .check:checked で、その後に表示されます。