Pemilih CSS yang berlaku untuk elemen dengan dua kelas


472

Apakah ada cara untuk memilih elemen dengan CSS berdasarkan nilai atribut kelas yang disetel ke dua kelas tertentu. Sebagai contoh, katakanlah saya memiliki 3 div:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

CSS apa yang bisa saya tulis untuk memilih HANYA elemen kedua dalam daftar, berdasarkan pada fakta bahwa itu adalah anggota dari kedua kelas foo DAN bar?

Jawaban:


735

Rantai kedua pemilih kelas (tanpa spasi di antaranya):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

Jika Anda masih harus berurusan dengan browser kuno seperti IE6, perlu diketahui bahwa itu tidak membaca pemilih kelas dirantai dengan benar: itu hanya akan membaca pemilih kelas terakhir ( .bardalam kasus ini) sebagai gantinya, terlepas dari apa pun kelas yang Anda daftarkan.

Untuk mengilustrasikan bagaimana browser lain dan IE6 menginterpretasikan ini, pertimbangkan CSS ini:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Output pada browser yang didukung adalah:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

Output pada IE6 adalah:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

Catatan kaki:

  • Browser yang didukung:
    1. Tidak dipilih karena elemen ini hanya memiliki kelas foo.
    2. Dipilih karena elemen ini memiliki kedua kelas foodan bar.
    3. Tidak dipilih karena elemen ini hanya memiliki kelas bar.

  • IE6:
    1. Tidak dipilih karena elemen ini tidak memiliki kelas bar.
    2. Dipilih karena elemen ini memiliki kelas bar, terlepas dari kelas apa pun yang terdaftar.

3
Apakah penting urutan yang saya masukkan?
Adam

3
Itu tidak masalah. (Ini akan untuk IE6 karena bagaimana menafsirkannya, dengan asumsi Anda harus mendukungnya.)
BoltClock

6
Apakah penting bahwa tidak ada ruang di antara mereka?
CodyBugstein

26
@Imray: Ya, ruang mewakili pemilih keturunan, yang akan membuat setiap pemilih kelas mewakili elemen yang berbeda. Tapi kita berbicara tentang satu elemen di sini.
BoltClock

2
@ David Brossard: Ya, benar.
BoltClock
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.