Apa arti koma dan spasi di beberapa kelas di CSS?

Ini adalah contoh yang saya tidak mengerti:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Sepertinya saya yang width: 460pxditerapkan ke semua kelas yang disebutkan di atas. Tetapi mengapa beberapa kelas dipisahkan oleh koma ( ,), dan beberapa hanya oleh spasi?

Saya berasumsi itu hanya width: 460pxakan diterapkan pada elemen yang menggabungkan kelas dengan cara yang disebutkan dalam file CSS. Misalnya, ini akan diterapkan <div class='container_12 grid_6'>tetapi tidak akan diterapkan ke <div class='container_12'>. Apakah asumsi ini benar?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Yang mengatakan "buat semua .grid_6 di dalam .container_12 dan semua .grid_8 di dalam lebar 460 piksel .container_16." Jadi, kedua hal berikut akan menghasilkan hal yang sama:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

Sedangkan untuk koma, ini menerapkan satu aturan ke beberapa kelas, seperti ini.

.blueCheese, .blueBike {
  color:blue;
}

Secara fungsional setara dengan:

.blueCheese { color:blue }
.blueBike { color:blue }

Tapi mengurangi verbositas.

.container_12 .grid_6 { ... }

Aturan ini mencocokkan simpul DOM dengan kelas container_12yang memiliki turunan (tidak harus anak) dengan kelas grid_6, dan menerapkan aturan CSS ke elemen DOM dengan kelas grid_6.

.container_12 > .grid_6 { ... }

Menempatkan di >antara mereka mengatakan bahwa grid_6node harus menjadi anak langsung dari node dengan kelas container_12.

.container_12, .grid_6 { ... }

Koma, seperti yang dinyatakan orang lain, adalah cara untuk menerapkan aturan ke banyak node berbeda pada satu waktu. Dalam kasus ini, aturan berlaku untuk setiap node dengan kelas container_12atau grid_6.

Tidak persis seperti yang diminta, tapi mungkin ini akan membantu.

Untuk menerapkan gaya ke elemen hanya jika memiliki kedua kelas, selektor Anda harus menggunakan tidak ada spasi di antara nama kelas.

Sebagai contoh:

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

Koma mengelompokkan kelas (menerapkan gaya yang sama ke semua kelas), spasi kosong memberi tahu bahwa pemilih berikut harus berada dalam selektor pertama.

Karena itu

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

menerapkan gaya itu hanya ke kelas .grid_6yang ada di dalam .container_12kelas dan ke .grid_8kelas yang ada di dalamnya .container_16.

Itu width: 460px; akan diterapkan ke elemen dengan .grid_8kelas, terkandung di dalam elemen dengan .container_16kelas, dan elemen dengan .grid_6kelas, yang terkandung di dalam elemen dengan .container_12.

Ruang berarti warisan, dan koma berarti 'dan'. Jika Anda meletakkan properti dengan selektor like
.class-a, .class-b, Anda akan memiliki properti yang diterapkan ke elemen dengan salah satu dari dua kelas tersebut.

Semoga saya bisa membantu.

Anda memiliki empat kelas dan dua pemilih dalam contoh Anda:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Jadi .container_12dan .grid_6keduanya kelas, tetapi aturan width: 460pxhanya akan diterapkan ke elemen yang memiliki .grid_6kelas yang merupakan turunan dari elemen yang memiliki.container_16 kelas tersebut.

Sebagai contoh:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

Di atas berarti Anda menerapkan gaya ke dua kelas, yang ditunjukkan dengan koma.

Ketika Anda melihat dua elemen berdampingan tidak terpisah, Anda dapat berasumsi bahwa itu mengacu pada suatu area di dalam suatu area. Jadi di atas, gaya ini hanya berlaku untuk kelas grid_6 di dalam kelas container_12 dan kelas grid_8 di dalam kelas container_16.

pada contoh:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

Grid_6 pertama tidak akan terpengaruh sedangkan kelas grid_6 kedua akan terpengaruh karena berada di dalam container_12.

Pernyataan seperti

#admin .description p { font-weight:bold; }

Hanya akan menerapkan huruf tebal ke

tag di dalam area yang memiliki kelas "deskripsi" yang berada di dalam area dengan id "admin", seperti:

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460pxhanya akan diterapkan ke .grid_6dan.grid_8

Sunting: Ini adalah artikel yang sangat bagus untuk Anda

http://css-tricks.com/multiple-class-id-selectors/

Kombinasi penyeleksi mendapatkan arti yang berbeda - gambar terlampir menjelaskan dengan mudah

a) Beberapa selektor dipisahkan oleh koma ( ,) - Gaya yang sama diterapkan ke semua elemen yang dipilih.

div,.elmnt-color {
  border: 1px solid red;
}

Di sini gaya batas diterapkan ke DIVelemen dan .elmnt-colorelemen yang diterapkan kelas CSS .

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) Beberapa selektor dipisahkan oleh spasi - Itu disebut selektor keturunan.

div .elmnt-color {
  background-color: red;
}

Di sini gaya batas diterapkan ke .elmnt-colorelemen yang diterapkan kelas CSS yang bersifat anak elemen dari suatu DIVelemen.

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) Beberapa penyeleksi ditentukan tanpa spasi - Di sini gaya diterapkan ke elemen yang memenuhi semua kombinasi.

div.elmnt-color {
  border: 1px solid red;
}

Di sini gaya batas diterapkan hanya untuk DIVelemen dengan kelas CSS.elmnt-color .

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

Detail terlampir di https://www.csssolid.com/css-tips.html

Catatan: Kelas CSS hanyalah salah satu dari Pemilih CSS. Aturan ini berlaku untuk semua Pemilih CSS (mis .: Kelas, Elemen, ID, dll.,).