ruby-on-rails - クラスに囲まれている場合はcssを指定する

Question

私のrailsアプリケーションで次のことを行おうとしています：

クラス.fooがあるとしましょう

 .foo{ color:red;}

そして私は別のクラスの.barを持っています

.bar{ color:green;}

バークラスに囲まれている場合にのみ、foo要素の色を青に変更したい

例：ここで「何とか何とか」を青にしたい

<div class = "bar" >
  <div class = "foo" >
  blah blah
  </div>
</div>

どうすればいいのですか？LESSなどを使用せずに。

score 5 · Accepted Answer

このように書いてください：

.bar .foo{
color:blue
}

＆より具体的には次のように記述します。

.bar > .foo{
    color:blue
    }

これを確認してくださいhttp://jsfiddle.net/DEmk7/1/

score 1 · Accepted Answer

この例によると：

<div class = "bar" >
  <div class = "foo" >
  blah blah
  </div>
</div>

クラスfooを使用してdivに他のクラスを与えることもできます。

<div class = "bar" >
  <div class = "foo blue" >
  blah blah
  </div>
</div>

あなたのCSSであなたは次のように書きます：

.foo{ color:red;}
.bar{ color:green;}
.blue{color:blue !important;}

score 0 · Accepted Answer

ネストを指定するには、cssセレクターをスペースで区切ることができます。例えば

.bar .foo
{
    color:blue;
}

特にこの形式では、次の両方に一致します。

<div class = "bar" >
  <div class = "foo" >
  blah blah
  </div>
</div>

と

<div class = "bar" >
  <div class = "yay" >
    <div class="foo">
      blah blah
    </div>
  </div>
</div>

">"子セレクターを使用すると、直接の子のみをターゲットにできます。つまり、yayの子は一致しません。

3 に答える 3