web-dev-qa-db-ja.com

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

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

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

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

csscss-selectors
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
bahman parsamanesh