Apa arti dari pemilih CSS “~” (tilde / squiggle / twiddle)?

858

Mencari ~karakter itu tidak mudah. Saya mencari beberapa CSS dan menemukan ini

.check:checked ~ .content {
}

Apa artinya?

css css-selectors Akshat
sumber
3
Periksa demo yang akan Anda pahami. Berikut ini adalah daftar pemilih CSS
Dipak
@ TylerH, itu sesuatu yang sangat umum digunakan dalam posting Stack Overflow, harap tenang, saya tidak bermaksud membuatnya merasa lebih buruk.
Arsen Khachaturyan
@ArsenKhachaturyan. Mungkin Anda salah paham; sintaks blokir kutipan adalah untuk menunjukkan kutipan , yaitu ketika pengguna menunjukkan sesuatu (teks, gambar, kode, dll) bukan karya atau kata-kata mereka sendiri, tetapi disalin dari tempat lain. Seperti semua format, ini memiliki tujuan semantik; itu bukan sesuatu yang mau ditambahkan mau tak mau. Demikian juga, jangan tidak menambahkan penyorotan berani acak untuk kata-kata. Ini harus digunakan untuk penekanan, hemat.
TylerH
@ TylerH Saya mengerti bahwa namanya adalah "kutipan" dan juga apa arti "kutipan" itu sendiri. Namun terkadang ketika Anda benar-benar ingin membedakan pertanyaan dari teks biasa, Anda dapat mencoba beberapa teknik penekanan seperti yang saya lakukan. Untuk huruf tebal juga jelas digunakan ketika Anda ingin menekankan hal-hal, seperti kata kunci atau istilah yang terkenal. Saya biasanya tidak suka ketika orang menggunakan huruf tebal untuk alasan yang tidak diketahui tetapi kadang-kadang dapat digunakan untuk orang-orang dengan mudah menemukan informasi terkait topik.
Arsen Khachaturyan
@ArsenKhachaturyan Tolong jangan lakukan itu. >hanya untuk kutipan , tidak pernah digunakan untuk tujuan lain. Anda juga tidak boleh berani menyebutkan nama teknologi acak dalam pertanyaan. Kita dapat melihat teknologi mana yang relevan melalui tag.
meagar

Jawaban:

1371

The ~pemilih sebenarnya adalah saudara combinator Umum (berganti nama menjadi Selanjutnya-saudara combinator di selektor Level 4 ):

Combinator saudara kandung umum terbuat dari karakter "tilde" (U + 007E, ~) yang memisahkan dua urutan penyeleksi sederhana. Elemen-elemen yang diwakili oleh dua urutan berbagi induk yang sama di pohon dokumen dan elemen yang diwakili oleh urutan pertama mendahului (tidak harus segera) elemen diwakili oleh yang kedua.

Perhatikan contoh berikut:

.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>
Luaskan cuplikan

.a ~ .b cocok dengan item daftar 4 dan 5 karena mereka:

  • Apakah .belemen
  • Adalah saudara dari .a
  • Tampil setelah .adalam urutan sumber HTML.

Demikian juga, .check:checked ~ .contentcocokkan semua .contentelemen yang merupakan saudara kandung .check:checkeddan muncul setelahnya.

Salman A
sumber
13
"Tidak harus segera" adalah bagian kunci dari deskripsi ini.
PanicBus
1
Apakah ada pemilih untuk semua elemen dengan induk yang sama?
Nick N.
1
@NickN. Anda maksud .parent > *?
Salman A
@SalmanA tidak persis, saya berharap ada pemilih yang dapat Anda gunakan, jika Anda tidak tahu orang tuanya.
Nick N.
7
@ NickN. Tidak ada. CSS dibuat dengan proposisi bahwa parser CSS tidak pernah melihat kembali DOM untuk membuat kecocokan. Itulah alasan yang sama bahwa tidak ada pemilih induk.
yunzen
191

Bagus juga untuk memeriksa kombinator lain dalam keluarga dan untuk kembali ke apa yang spesifik ini.

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

Contoh daftar periksa:

  • ul li- Melihat ke dalam - Memilih semua yang lielemen ditempatkan (di mana saja) di dalam ul; Pemilih keturunan
  • ul > li- Melihat ke dalam - Memilih hanya li elemen langsung dari ul; yaitu hanya akan memilih anak li- anak langsung dari ul; Pemilih Anak atau Pemilih kombinator anak
  • ul + ul- Mencari di luar - Memilih yang ulsegera mengikuti ul; Itu tidak mencari ke dalam, tetapi mencari di luar untuk elemen segera berikut; Selector Adjacent Adjacent
  • ul ~ ul- Mencari di luar - Memilih semua ulyang mengikuti ultidak masalah di mana itu, tetapi keduanya ulharus memiliki orang tua yang sama; Pemilih Saudara Umum

Yang kita cari di sini adalah Pemilih Sibling Jenderal

Lijo Joseph
sumber
2
Yang ini paling masuk akal. Terminologi awam untuk penyelamatan lagi. Sekarang saya dapat membaca dokumentasi teknis.
TheRealChx101
2
Apakah ada pemilih saudara untuk SEMUA saudara kandung, bukan hanya yang mengikuti?
Elijah Mock
1
@EliTheHuman, tidak. Silakan lihat posting SO ini untuk lebih jelasnya - stackoverflow.com/a/11813469/6830901
Lijo Joseph
174

Combinator saudara kandung

Pemilih combinator saudara umum sangat mirip dengan pemilih combinator saudara yang berdekatan. Perbedaannya adalah bahwa elemen yang dipilih tidak perlu langsung berhasil elemen pertama, tetapi dapat muncul di mana saja setelah itu.

Info lebih lanjut

Rohit Azad
sumber
31

Itu General sibling combinatordan dijelaskan dalam jawaban @ Salaman dengan sangat baik.

Apa yang saya lewatkan adalah Adjacent sibling combinatoryang +terkait dan erat ~.

contoh akan 

.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>
  • Cocok dengan elemen yang ada .b
  • Bersebelahan dengan .a
  • Setelah .adalam HTML

Dalam contoh di atas akan menandai ke-2 litetapi bukan ke-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>
Luaskan cuplikan

JSFiddle

Matas Vaitkevicius
sumber