Apa arti koma dan spasi di beberapa kelas di CSS?

98

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?

css  css-selectors 
— Roma
sumber
Saya tahu ini tidak menjawab pertanyaan Anda, tetapi saya ingin menawarkan rekomendasi untuk mencoba SASS. Sepertinya Anda akan memiliki banyak CSS duplikat, mengingat nama kelasnya.
— Chuck Callebs
1
@Roman Ada juga bisa menjadi `.container_12 .grid_6.line` Perhatikan, tidak ada spasi antara grid_6 dan baris; ini menyiratkan bahwa elemen harus memiliki grid_6 dan line sebagai kelas. Dan itu harus menjadi anak dari 'wadah', seperti yang ditunjukkan @Sampson dalam jawaban yang diterima :)
— Paulo

Jawaban:

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

— Sampson
sumber
1
Saya mengerti bahwa kita dapat menerapkan satu aturan ke beberapa kelas yang dipisahkan oleh koma. Tidak jelas bagi saya mengapa beberapa kelas dalam contoh ini tidak dipisahkan dengan koma.
— Roman
9
Ketika mereka dipisahkan oleh spasi, itu adalah masalah bersarang. Yang terakhir ditemukan di dalam yang pertama. Begitu .container_12 .grid_6juga menangani hanya .grid_6item yang ditemukan di dalam .container_12item.
— Sampson
33 
.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.

— Steve Madsen
sumber
kata lain dan tidak atau?
— Kick Buttowski
Jawaban bagus Saya suka fakta bahwa ini menjelaskan perbedaan <space>dan >antara kelas / id.
— Alex Lowe
14

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

— Alan Peabody
sumber
7

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.

— Cloudanger
sumber
6

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.

— 3rgo
sumber
3

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>
— James Sumners
sumber
3

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>
— canggung
sumber
Ini sangat membantu! Terutama ilustrasi # yang diikuti dengan '.'.
— Shao-Kui
-2

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

— Selva
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.