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

Apa perbedaan antara kedua penyeleksi ini?

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

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

.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)

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.)

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