Targetkan elemen dengan banyak kelas, dalam satu aturan

Saya memiliki beberapa HTML yang akan memiliki elemen dengan banyak kelas, dan saya perlu menetapkannya dalam satu aturan, sehingga kelas yang sama dapat berbeda dalam wadah yang berbeda. Katakanlah saya memiliki ini di CSS saya:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

Lalu saya memiliki ini di HTML saya:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

Dapatkah saya menargetkan ini dalam satu aturan? Seperti ini, misalnya, yang saya tahu tidak berfungsi:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

.border-blue.background { ... }untuk satu item dengan banyak kelas.
.border-blue, .background { ... }adalah untuk beberapa item masing-masing dengan kelasnya sendiri.
.border-blue .background { ... }adalah untuk satu item di mana '.background' adalah anak dari '.border-blue'.

Lihat jawaban Chris untuk penjelasan yang lebih lengkap.

Untuk berjaga-jaga jika seseorang tersandung pada ini seperti yang saya lakukan dan tidak menyadarinya, dua variasi di atas untuk kasus penggunaan yang berbeda.

Pengikut:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

adalah untuk saat Anda ingin menambahkan gaya ke elemen yang memiliki batas biru atau kelas latar belakang, misalnya:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

semua akan mendapatkan bingkai biru dan latar belakang putih diterapkan pada mereka.

Namun, jawaban yang diterima berbeda.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

Ini menerapkan gaya ke elemen yang memiliki kedua kelas jadi dalam contoh ini hanya kelas <div>dengan kedua kelas yang harus menerapkan gaya (di browser yang menafsirkan CSS dengan benar):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

Jadi pada dasarnya anggap saja seperti ini, pemisah koma berlaku untuk elemen dengan satu kelas ATAU kelas lain dan pemisah titik berlaku untuk elemen dengan satu kelas DAN kelas lain .