web-dev-qa-db-ja.com

"〜"（チルダ/スキグル/トゥイドル）CSSセレクターとはどういう意味ですか？

~文字を検索するのは簡単ではありません。私はいくつかのCSSを見ていてこれを見つけました

.check:checked ~ .content {
}

どういう意味ですか？

csscss3css-selectors
748
Akshat

~セレクタは、実際には 一般的な兄弟コンビネータ です（ セレクタのレベル4 では、後続の兄弟コンビネータに変更されています）

一般的な兄弟コンビネータは、単純なセレクタの2つのシーケンスを区切る "チルダ"（U + 007E、〜）文字でできています。 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の兄弟です
  • HTMLソース順で.aの後に表示されます。

同様に、.check:checked ~ .contentは、.contentの兄弟であり、その後ろにあるすべての.check:checked要素に一致します。

1247
Salman A

一般的な兄弟コンビネータ

一般的な兄弟コンビネータセレクタは、隣接する兄弟コンビネータセレクタと非常によく似ています。違いは、選択されている要素が最初の要素のすぐ後に続く必要はなく、その後のどこにでも出現できることです。

詳細情報

170
Rohit Azad

ファミリーの他の combinators をチェックし、この特定のものに戻るのも良いでしょう。

  • ul li
  • ul > li
  • ul + ul
  • ul ~ ul

チェックリストの例：

  • ul li-Looking inside-allを選択li内の（どこでも）配置されたul要素。 子孫セレクター
  • ul > li-Looking inside-onlyを選択liのdirectul要素;つまり、liの直接の子ulのみを選択します。 子セレクターまたは子コンビネーターセレクター
  • ul + ul-Looking outside-ulの直後のulを選択します。内部を見るのではなく、すぐ後に続く要素を外で見る。 隣接する兄弟セレクター
  • ul ~ ul-Looking outside-ulに続くすべてのulを選択しますどこにいても、両方のulは同じ親を持つ必要があります。 一般的な兄弟セレクター

ここで見ているのはGeneral Sibling Selector

148
Lijo Joseph

それはGeneral sibling combinatorであり、@ Salamanの答えでとてもよく説明されています。

私が見逃したのはAdjacent sibling combinatorで、これは+で、~と密接に関係しています。

例は

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>
  • .bである要素に一致
  • .aに隣接しています
  • HTMLの.aの後

上記の例では、2番目のliをマークしますが4番目のマークはしません。

   .a + .b {
     background-color: #ff0000;
   }
<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

27
Matas Vaitkevicius

属性セレクタ（例：[attr~=value]）では、チルダは

属性名が attr の要素を表し、その値は空白で区切られた単語のリストで、そのうちの1つは正確に value です。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

5
Ian Hunter