セレクターdiv + p（プラス）とdiv〜p（チルダ）の違い

Question 1

方法W3Schoolsのはそれフレーズを、彼らは同じに聞こえます。

W3SchoolsのCSSリファレンス

div + p
<p>要素の直後に配置されるすべての要素を選択し<div>ます

div ~ p
<p>要素が前にあるすべての要素を選択し<div>ます

<p>要素が要素の直後にある場合、<div>それは<p>要素の前に要素があることを意味しません<div>か？

とにかく、与えられた要素の直前にある要素を選択できるセレクターを探しています。

Question 2

隣接する兄弟セレクターX + Y

隣接する兄弟セレクターの構文は次のとおりです。E1+ E2、ここでE2はセレクターのサブジェクトです。E1とE2がドキュメントツリーで同じ親を共有し、E1がE2の直前にあり、要素以外のノード（テキストノードやコメントなど）を無視する場合、セレクターは一致します。

ul + p {
   color: red;
}

この例では、前の要素の直前にある要素のみを選択します。この場合、各ulの後の最初の段落にのみ赤いテキストが表示されます。

コードスニペットを表示する

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

スニペットを展開

一般的な兄弟セレクターX〜Y

〜コンビネータは2つのセレクターを分離し、最初の要素が前にある場合にのみ2番目の要素と一致し、両方が共通の親を共有します。

ul ~ p {
   color: red;
}

この兄弟コンビネータはX + Yに似ていますが、それほど厳密ではありません。隣接するセレクター（ul + p）は、前のセレクターの直前にある最初の要素のみを選択しますが、これはより一般化されています。上記の例を参照すると、ulに続く限り、任意のp要素が選択されます。

コードスニペットを表示する

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

ソース

Question 3

<p>要素が要素の直後にある場合、<div>それは<p>要素の前に要素があることを意味しません<div>か？

正解です。言い換えると、div + pはの適切なサブセットです。前者に一致するものdiv ~ pはすべて、必要に応じて後者にも一致します。

との違いは+、両方が同じ親を共有している限り、最初の要素からの近接度に関係なく、後続のすべての兄弟に一致する~こと~です。

これらのポイントは両方とも、各ルールが異なるプロパティを適用する1つの例で最も簡潔に示されています。のp直後に続くものにdivは、両方のルールが適用されていることに注意してください。

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

スニペットを展開

とにかく、与えられた要素の直前にある要素を選択できるセレクターを探しています。

残念ながら、まだありません。

Question 4

この例を考えてみましょう。

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
}

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

スニペットを展開

Question 5

1）隣接する兄弟セレクター（S1 + S2）

隣接する兄弟セレクターは、別の指定された要素のすぐ隣にある指定された要素を選択するために使用されます。両方の要素が同じレベルにある必要があります。

div + p {
    color:red;
}

隣接する兄弟セレクターの例

2）一般的な兄弟セレクター（S1〜S2）

一般的な兄弟セレクターは、別の指定された要素の指定されたすべての兄弟要素を選択するために使用されます。

div ~ p {
   color:red;
}

一般的な兄弟セレクターの例

隣接する兄弟（S1 + S2）と一般的な兄弟（S1〜S2）セレクター：

隣接する兄弟（S1 + S2）セレクターは、直接の兄弟要素のみを選択しますが、一般的な兄弟（S1〜S2）セレクターは、別の指定された要素のすべての兄弟要素を選択します。どちらの場合も、両方の要素（S1とS2）は同じレベルにある必要があります。

残りのセレクターについては、https：//www.csssolid.com/35-css-selectors-to-remember.htmlで説明されています。