web-dev-qa-db-ja.com

複数のクラスに基づいて要素を選択する

twoスタイルがあるときにタグに適用したいスタイルルールがあります。 JavaScriptなしでこれを実行する方法はありますか?言い換えると:

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

li.left.ui-class-selectorの両方のクラスが適用されている場合は、私のスタイルルールのみを適用します。

323
Ciel

あなたは2つのクラスを意味しますか?セレクタを「連結」します(間にスペースを入れないでください)。

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

これはclass1を持ちclass2を持つすべての要素を選択します。

あなたの場合:

li.left.ui-class-selector {

}

公式文書: CSS2クラスセレクタ .


akamikeはInternet Explorer 6でこの方法に問題があることを指摘しているので、これを読むとよいでしょう。 IE6でdoubleクラスを使うCSS?

547
Felix Kling

チェーンセレクタはクラスだけではなく、クラスとIDの両方に使用できます。

クラス

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

Class&Id

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

Id&Id

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

IE 6以外のすべての現在の良いブラウザはこれをサポートしています。そのため、 "。classA.classB"は "。classB"だけに基づいて選択されます。

あなたの場合

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

または

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

あなたはこれらの解決策を使うことができます:

CSSルールは、次の2つのクラスを持つすべてのタグに適用されます。

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

CSSルールは、以下の2つのクラスを持つ<li>を持つすべてのタグに適用されます。

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

jQueryソリューション:

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

Javascriptソリューション:

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