Pilih elemen berdasarkan beberapa kelas

360

Saya memiliki aturan gaya yang ingin saya terapkan pada tag ketika memiliki dua kelas. Apakah ada cara untuk melakukan ini tanpa JavaScript? Dengan kata lain:

<li class='left ui-class-selector'>

Saya ingin menerapkan aturan gaya saya hanya jika likeduanya .leftdan .ui-class-selectorkelas diterapkan.

css css-selectors Ciel
sumber
css-tricks.com/multiple-class-id-selectors - lihat Selektor Kelas Ganda
firstpostcommenter

Jawaban:

595

Maksud Anda dua kelas? "Rantai" pemilih (tidak ada spasi di antara mereka):

.class1.class2 {
    /* style here */
}

Ini memilih semua elemen dengan class1yang juga ada class2.

Dalam kasus Anda:

li.left.ui-class-selector {

}

Dokumentasi resmi: pemilih kelas CSS2 .

Seperti akamike menunjukkan masalah dengan metode ini di Internet Explorer 6 Anda mungkin ingin membaca ini: Gunakan kelas ganda di IE6 CSS?

Felix Kling
sumber
6
Harap dicatat bahwa IE6 tidak suka ini, karena tidak membaca rantai kelas. Itu hanya akan melihat kelas terakhir dalam rantai.
akamike
16
tidak :) Semua situs web utama telah jatuh, menurun atau berencana untuk menjatuhkan dukungan IE6 dalam waktu dekat .. Lakukan hal yang sama!
Thomas Bonini
@ Andreas Bonini: Ya saya tahu. Sejujurnya saya sudah tidak peduli tentang IE6 untuk waktu yang lama. (Saya menghapus komentar saya sebelumnya karena saya menemukan pertanyaan lain yang berkaitan dengan masalah ini.)
Felix Kling
Ya, Anda tidak dapat menggunakannya sama sekali di IE6, hanya perlu rute yang lebih panjang untuk menata elemen Anda. Misalnya, menata setiap kelas secara terpisah dan menggunakan kekhususan CSS yang sesuai untuk mengesampingkan sebaik mungkin.
akamike
2
Saya ingat menari di kuburan IE6. Saya bahkan belum harus mendukung IE10 tahun ini, dan menjatuhkan IE sama sekali ada di cakrawala. Saya suka masa depan. ☺
Michael Scheper
22

Selektor rantai tidak terbatas hanya untuk kelas, Anda dapat melakukannya untuk kelas dan id.

Kelas

.classA.classB {
/*style here*/
}

Identitas kelas

.classA#idB {
/*style here*/
}

Aku melakukannya

#idA#idB {
/*style here*/
}

Semua browser yang bagus mendukung ini kecuali IE 6, itu memilih berdasarkan pemilih terakhir dalam daftar. Jadi ".classA.classB" akan memilih berdasarkan hanya ".classB".

Untuk kasusmu

li.left.ui-class-selector {
/*style here*/
}

atau

.left.ui-class-selector {
/*style here*/
}
nidhi0806
sumber
9
Id & Id adalah pemilih yang secara konsep aneh.
Félix Gagnon-Grenier
0

Anda dapat menggunakan solusi ini:

Aturan CSS berlaku untuk semua tag yang memiliki dua kelas berikut:

.left.ui-class-selector {
    /*style here*/
}

Aturan CSS berlaku untuk semua tag yang ada <li>dengan dua kelas berikut:

li.left.ui-class-selector {
   /*style here*/
}

solusi jQuery: 

$("li.left.ui-class-selector").css("color", "red");

Solusi Javascript: 

document.querySelector("li.left.ui-class-selector").style.color = "red";
bahman parsamanesh
sumber