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

Harap dicatat bahwa IE6 tidak suka ini, karena tidak membaca rantai kelas. Itu hanya akan melihat kelas terakhir dalam rantai.

— akamike

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

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

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

Id & Id adalah pemilih yang secara konsep aneh.

— Félix Gagnon-Grenier

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