Perbedaan antara penyeleksi div + p (plus) dan div ~ p (tilde)

Cara w3sekolah mengungkapkannya , mereka terdengar sama.

Referensi CSS W3Schools

div + p
Memilih semua <p>elemen yang ditempatkan tepat setelah <div>elemen

div ~ p
Memilih setiap <p>elemen yang didahului oleh sebuah <div>elemen

Jika sebuah <p>elemen berada tepat setelah sebuah <div>elemen, bukankah itu berarti <p>elemen tersebut didahului oleh sebuah <div>elemen?

Bagaimanapun, saya sedang mencari selektor di mana saya dapat memilih elemen yang ditempatkan tepat sebelum elemen tertentu.

Pemilih saudara yang berdekatan X + Y

Selektor saudara yang berdekatan memiliki sintaks berikut: E1 + E2, di mana E2 adalah subjek pemilih. Selektor cocok jika E1 dan E2 berbagi induk yang sama di pohon dokumen dan E1 tepat mendahului E2, mengabaikan node non-elemen (seperti node teks dan komentar).

ul + p {
   color: red;
}

Dalam contoh ini, ia hanya akan memilih elemen yang didahului oleh elemen sebelumnya. Dalam kasus ini, hanya paragraf pertama setelah ul yang akan memiliki teks berwarna merah.

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>

Seleksi saudara kandung umum X ~ Y

~ Combinator memisahkan dua pemilih dan mencocokkan elemen kedua hanya jika didahului oleh yang pertama, dan keduanya berbagi induk yang sama.

ul ~ p {
   color: red;
}

Kombinator saudara kandung ini mirip dengan X + Y, namun tidak terlalu ketat. Sementara selektor yang berdekatan (ul + p) hanya akan memilih elemen pertama yang didahului oleh selektor sebelumnya, yang satu ini lebih digeneralisasikan. Ini akan memilih, mengacu pada contoh kita di atas, elemen p apa saja, selama mereka mengikuti ul.

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>

Sumber

code.tutsplus

Seleksi saudara kandung MDN

Seleksi saudara kandung yang berdekatan w3

Jika sebuah <p>elemen berada tepat setelah sebuah <div>elemen, bukankah itu berarti <p>elemen tersebut didahului oleh sebuah <div>elemen?

Ini benar. Dengan kata lain, div + padalah bagian yang tepat dari div ~ p- apa pun yang cocok dengan yang pertama juga cocok dengan yang terakhir, oleh kebutuhan.

Perbedaan antara +and ~is yang ~cocok dengan semua saudara berikut terlepas dari kedekatannya dari elemen pertama, selama keduanya berbagi induk yang sama.

Kedua poin ini diilustrasikan secara ringkas dengan satu contoh, di mana setiap aturan menerapkan properti yang berbeda. Perhatikan bahwa salah satu pyang segera mengikuti divkedua aturan tersebut diterapkan:

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>

Bagaimanapun, saya sedang mencari selektor di mana saya dapat memilih elemen yang ditempatkan tepat sebelum elemen tertentu.

Sayangnya, belum ada .

pertimbangkan contoh ini:

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>

1) Penyeleksi Saudara yang Berdekatan (S1 + S2)

Pemilih saudara yang berdekatan digunakan untuk memilih elemen tertentu yang berada tepat di samping elemen tertentu lainnya. Kedua elemen tersebut harus berada pada level yang sama.

div + p {
    color:red;
}

Contoh Seleksi Saudara yang Berdekatan

2) Penyeleksi Saudara Umum (S1 ~ S2)

Pemilih saudara umum digunakan untuk memilih semua elemen saudara tertentu dari elemen lain yang ditentukan.

div ~ p {
   color:red;
}

Contoh General Sibling Selectors

Saudara yang Berdekatan (S1 + S2) vs Saudara Umum (S1 ~ S2) penyeleksi:

Pemilih saudara yang berdekatan (S1 + S2) hanya memilih elemen saudara kandung tetapi pemilih saudara umum (S1 ~ S2) memilih semua elemen saudara dari elemen lain yang ditentukan. Kedua kasus, kedua elemen (S1 dan S2) harus berada pada level yang sama.

Selektor yang tersisa dijelaskan di sini: https://www.csssolid.com/35-css-selectors-to-remember.html