web-dev-qa-db-ja.com

CSSで複数のクラスのコンマとスペースは何を意味しますか？

ここに私が理解できない例があります：

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width: 460pxは上記のすべてのクラスに適用されるようです。しかし、なぜいくつかのクラスはコンマ（,）で区切られ、いくつかは単にスペースで区切られているのでしょうか？

width: 460pxは、CSSファイルで言及されている方法でクラスを結合する要素にのみ適用されると想定しています。たとえば、<div class='container_12 grid_6'>に適用されますが、<div class='container_12'>には適用されません。この仮定は正しいですか？

csscss-selectors
80
Roman
.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

つまり、「。container_12内にすべての.grid_6を作成し、.container_16の460ピクセル幅内にすべての.grid_8を作成する」ということです。したがって、次の両方が同じものをレンダリングします。

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

コンマについては、このように1つのルールを複数のクラスに適用しています。

.blueCheese, .blueBike {
  color:blue;
}

機能的には次と同等です：

.blueCheese { color:blue }
.blueBike { color:blue }

しかし、冗長性は削減されます。

137
Sampson
.container_12 .grid_6 { ... }

このルールは、クラスcontainer_12の子孫（必ずしも子ではない）を持つクラスgrid_6のDOMノードと一致し、クラスgrid_6のDOM要素にCSSルールを適用します。

.container_12 > .grid_6 { ... }

それらの間に>を置くことは、grid_6ノードがクラスcontainer_12を持つノードの直接の子でなければならないことを意味します。

.container_12, .grid_6 { ... }

他の人が述べたように、コンマは一度に多くの異なるノードにルールを適用する方法です。この場合、ルールはcontainer_12またはgrid_6のクラスを持つノードに適用されます。

26
Steve Madsen

正確に尋ねられたものではありませんが、おそらくこれが役立つでしょう。

要素に両方のクラスがある場合にのみスタイルを要素に適用するには、セレクタでクラス名の間にスペースを使用しないでください。

例えば：

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
12
Alan Peabody

コンマクラスをグループ化（すべてに同じスタイルを適用）、空のスペースは、後続のセレクターが最初のセレクター内になければならないことを示します。

だから

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

そのスタイルを、.grid_6クラス内の.container_12クラスと.grid_8内の.container_16クラスのみに適用します。

7
Cloudanger

width: 460px;は.grid_8クラスの要素に適用され、含まれる内部.container_16クラスの要素、および.grid_6クラスの要素に含まれます、含まれている内部.container_12の要素。

スペースは遺産を意味し、コンマは「and」を意味します。次のようなセレクタを使用してプロパティを配置する場合
.class-a, .class-b、2つのクラスのいずれかを持つ要素にプロパティが適用されます。

私が助けてくれたことを願っています。

5
3rgo

例には4つのクラスと2つのセレクターがあります。

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

したがって、.container_12と.grid_6は両方ともクラスですが、ルールwidth: 460pxは、.grid_6クラスを持つ要素の子孫である.container_16クラスを持つ要素にのみ適用されます。

例えば：

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
3
James Sumners

上記は、コンマで示される2つのクラスにスタイルを適用していることを意味します。

分離されていない2つの要素が並んで表示されている場合、それが領域内の領域を参照していると想定できます。したがって、上記では、このスタイルはcontainer_12クラス内のgrid_6クラスとcontainer_16クラス内のgrid_8クラスにのみ適用されます。

例では：

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

最初のgrid_6はcontainer_12内に含まれているため、2番目のgrid_6クラスは影響を受けません。

次のような文

#admin .description p { font-weight:bold; }

太字を適用するのは

次のように、IDが「admin」のエリア内にあるクラス「description」を持つエリア内のタグ

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>
3
clumsyfingers
.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460pxは.grid_6および.grid_8にのみ適用されます

編集：これはあなたのための非常に良い記事です

http://css-tricks.com/multiple-class-id-selectors/

1
Jitendra Vyas