CSSは最も近い子孫を選択しますか？

Question

CSSを使用すると、特定のセレクタに一致する要素の最も近い子孫を選択する方法はありますか？ある

<div class="foo"> <!-- if we're inside this --> 
    <div> 
    <br /> 
    <div class="bar"> <!-- match this --> 
     <div class="bar"> <!-- but not this --> 
     <div class="bar"> <!-- or this --> 
     </div> 
     </div> 
    </div> 
    <div class="bar"> <!-- I don't really care whether we match this --> 
    </div> 
    </div> 
</div> 

、最初の任意の.foo内.bar（多くの子または兄弟要素が間にあるかに関係なく）ではなく、第二または第三.barを選択することになる何か。

Answer 1

ここに私のhacktasticの答えです：http://jsfiddle.net/thirtydot/gqJdP/2/

/*repeat for as many levels as there could be*/ 
.foo > .bar, 
.foo > :not(.bar) > .bar, 
.foo > :not(.bar) > :not(.bar) > .bar { 
    border-color: blue; 
} 
.bar { 
    border: 1px solid red; 
    padding: 10px; 
} 

コメントから自分自身を引用：あなたは両親の可能な数に上限を置くことができる場合

私の提案は、不快が、実行可能です.fooと一致させたい.barの間です。セレクタを10回繰り返す必要があったとしても、それほど悪くはありません。

Answer 2

いいえ、あなたはを完全にのCSSのみを使用して求めることはできません。 nth-childまたはnth-of-typeを選択できますが、the-nth-item-matching-this-selectorは選択できません。 「証拠」として

、（CSS1とCSS2.1のすべての機能をカバーする）可能なCSS3セレクタのリストを確認してください。
http://www.w3.org/TR/selectors/

は、JavaScript（クライアント上）またはサーバーを使用する必要があります（例えば、そのような最初の項目に特別なクラスを注釈する）。

---

編集：あなたの編集に基づいて、あなたが行うことができます：

.foo .bar  { font-weight:bold; color:red } 
.foo .bar .bar { font-weight:normal; color:black } 

すなわち、明示的に継承されることになるの祖先に適用されるスタイルを「元に戻す」する必要があります。これは脆弱です—祖先のスタイルを変更する場合は、対応する「オーバーライド」ルールの値も変更する必要がありますが、効果的ですが効果的です。

@ thirtydotがハックを回答として投稿すると、私たちもそれを受け入れることができます。

これはおそらく役に立ちませんが、この目標を達成できることにも注意してください。with XPath

.foo > .bar 

をし、任意の遠くチェーンダウンを選択していない：

Answer 3

これはのみ.fooの最初の子要素を取得する必要があります。