Targetkan elemen dengan banyak kelas, dalam satu aturan

117

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);
}
Tanner Ottinger
sumber

Jawaban:

182

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

Vian Esterhuizen
sumber
2
Terima kasih! Saya tidak tahu apakah ini mungkin, jadi saya bertanya di sini untuk mencari tahu.
Tanner Ottinger
Solusi ini tidak berfungsi untuk saya (atau tidak berfungsi lagi ...).
fresko
Anda perlu memisahkan kelas-kelasnya dengan koma, seperti jawaban Chris
fresko
apa yang kamu maksud .border-blue .background { ... }anak itu? saya mencoba ini dan ini tidak berhasil
Eliav Louski
174

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 .

Chris Graham
sumber
12
Ini adalah jawaban yang sangat membantu yang hampir tidak saya baca. Bersulang!
psicopoo
1
Hati-hati. Tidak ada spasi di.blue-border.background
Knu8
2
think of it as AND and OR: Saran yang bagus. Saya dapat menambahkan bahwa itu .x .ydapat dianggap sebagaiy && ancestors.has(x)
Siddharth Garg