css - 特定の要素内でのみ CSS クラスを参照する

Question

特定の問題に対する CSS 構文を見つけようとしています。本当に検索しましたが、答えが見つかりませんでした。これが問題です。私のHTMLマークアップは次のとおりです。

<div>
 <header>
  <div class="container">
   <div class="row">
   my content that I want red
   </div>
  </div>
 </header>
 <div class="container">
  <div class="row">
  my content that I want blue
  </div>
 </div>
</header>

「赤くしたいコンテンツ」を赤で、「青くしたいコンテンツ」を青で表示したいのですが、CSSしか使えません。

それを作るトリックを知っている人はいますか？残念ながら、サブクラスはここでは機能しません。

前もって感謝します、

Answer 1

あなたはおそらく一生懸命に検索していません。W3C では、12 を超えるセレクターが定義されています。

ここでは、使用します

header > div.container {
    color: red;
}

div > div.container {
    color:blue;
}

山かっこ ( >) は、最初の子セレクターです。2 番目は要素containerの最初の子ではないため、header赤いテキストはありません。同様に、 with red テキストは a ではなく acontainerの最初の子であるため、それだけが赤いテキストになります。headerdiv

Answer 2

たくさんのオプションがあります。それはすべてあなたの状況に本当に依存します。HTML を変更しない場合の例を次に示します。

親要素の使用

.row { color: blue }
header .row { color: red }

使用する:nth-of-type

.column:nth-of-type(1) .row { color: red }
.column:nth-of-type(2) .row { color: blue }

マークアップを追加したい場合は、いつでもクラスを追加できます。

Answer 3

順序が変わらない場合は、赤の場合は 1 番目の div、青の場合は 2 番目を選択できます。

おそらく親コンテナが必要になるでしょう。ヘッダー タグは、両方のコンテナー div を親にすることになっていますか?

Answer 4

CSS nth-of-type を使用できます

:nth-of-type

フィドル: http://jsfiddle.net/wn2BL/