Apa arti spasi dalam pemilih CSS? yaitu Apa perbedaan antara .classA.classB dan .classA .classB?

105

Apa perbedaan antara kedua penyeleksi ini?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

css css-selectors

— Quentin
sumber

105

.classA.classBmengacu pada elemen yang memiliki kelas A dan B ( class="classA classB"); sedangkan .classA .classBmengacu pada elemen dengan class="classB"turunan dari elemen dengan class="classA".

Edit: Spec untuk referensi: Pemilih Atribut (Lihat bagian 5.8.3 Pemilih Kelas)

— Williham Totland
sumber

44

Gaya seperti ini jauh lebih umum, dan akan menargetkan semua jenis elemen kelas "classB" yang berada di dalam semua jenis elemen kelas "classA".

.classA .classB {
  border: 1px solid; }

Ini akan bekerja, misalnya, pada:

<div class="classA">
  <p class="classB">asdf</p>
</div>

Namun, yang satu ini menargetkan semua jenis elemen yang merupakan kelas "classA", serta kelas "classB". Jenis gaya ini jarang terlihat, tetapi masih berguna dalam beberapa keadaan.

.classA.classB {
  border: 1px solid; }

Ini akan berlaku untuk contoh ini:

<p class="classA classB">asdf</p>

Namun, ini tidak akan berpengaruh pada hal berikut:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Perhatikan bahwa ketika elemen HTML memiliki beberapa kelas, mereka dipisahkan oleh spasi.)

2

Menampilkan kasus yang gagal sangat membantu.

— Hal50000

-1

.classA.classBArtinya elemen dengan kedua nama kelas akan dipilih sedangkan .classA .classBelemen dengan nama kelas classBdi dalamnya classAhanya akan dipilih.

— Amarnath Vishwakarma
sumber

2

Ini benar, tetapi pertanyaan itu telah dijawab dengan benar satu dekade lalu; itu tidak benar-benar membutuhkan jawaban baru.

— Brilliand