web-dev-qa-db-ja.com

CSSセレクターでスペースは何を意味しますか？つまり、.classA.classBと.classA .classBの違いは何ですか？

これら2つのセレクターの違いは何ですか？

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}
csscss-selectors
90
retrohound

.classA.classBは、クラスAとBの両方を持つ要素を参照します（class="classA classB"）;一方、.classA .classBは、class="classB"を持つ要素から派生したclass="classA"を持つ要素を指します。

編集：参照用の仕様： 属性セレクター （セクション5.8.3クラスセレクターを参照）

97
Williham Totland

このようなスタイルははるかに一般的であり、クラス「classA」の任意のタイプのエレメント内にネストされているクラス「classB」の任意のタイプのエレメントをターゲットにします。

.classA .classB {
  border: 1px solid; }

たとえば、次のように機能します。

<div class="classA">
  <p class="classB">asdf</p>
</div>

ただし、これは、クラス「classA」とクラス「classB」の両方であるすべてのタイプの要素を対象としています。このタイプのスタイルはあまり見られませんが、状況によってはまだ役立ちます。

.classA.classB {
  border: 1px solid; }

これはこの例に適用されます：

<p class="classA classB">asdf</p>

ただし、次のものには影響しません。

<p class="classA">fail</p>
<p class="classB">fail</p>

（HTML要素に複数のクラスがある場合、それらはスペースで区切られることに注意してください。）

36
T E

正式には「子孫コンビネーター」として知られています。

それについて [〜＃〜] mdn [〜＃〜] または CSS仕様 で読んでください

0
elphe

.classA.classBは、両方のクラス名を持つ要素が選択されることを意味しますが、.classA .classBは、classB内のクラス名classAの要素のみが選択されることを意味します。

0
Amarnath Vishwakarma