タイプの最後の親に続く子のCSSセレクタ

Question

親クラスに続く親の親クラスだけを対象としたい子クラスを対象にしたいとします。以下のコードでは、.nested-parent要素の.bar-on element要素は、最初の.foo-onのために可視性が示されていますが、2番目の.foo-offクラスのみがこれらの子要素に影響を与えることが必要です。

<style> 
    .foo-on .bar-on {visibility: visible;} 
    .foo-on .bar-off {visibility: hidden;} 
    .foo-off .bar-off {visibility: visible;} 
    .foo-off .bar-on {visibility: hidden;} 
</style> 

<div class="foo-off"> 
    <div class="bar-on">Hidden</div> 
    <div class="bar-off">Visible</div> 
    <div class="foo-on"> 
     <div class="nested-parent"> 
      <div class="bar-on">Visible</div> 
      <div class="bar-off">Hidden</div> 
     </div> 
    </div> 
</div> 

私は一種の直系の子孫セレクタ.foo-on > .bar-onを使用することによってこの問題を解決することができますが、それは彼らが直接されていないので、それはそうネストされた要素（入れ子親クラスの下のもの）は全く影響されない可能子どもは.foo-offです。

私は、特定のクラスの子供のみを選択することができますが、最も近い親だけを選択することができる何らかの複雑なセレクタがありませんか？それともCSSだけではこれができないのでしょうか？

例：https://jsfiddle.net/oyLf6sm1/

Answer 1

あなたは「ネストされた、親の内側にネストされたのdivのは、あなたが余分なスタイルを作成する必要があり、そのようにしたい場合はそのような：

.nested-parent .bar-on{ visibility: hidden; } 

それとも、何ができますこのようなもの：

.nested-parent:first-child{ visibility: hidden; } 

Answer 2

試した>セレクタ？これを試して。

.foo-on > .bar-on {visibility: visible;} 
.foo-on > .bar-off {visibility: hidden;} 
.foo-off > .bar-off {visibility: visible;} 
.foo-off > .bar-on {visibility: hidden;}