css3：親クラスをテストするnot（）セレクタ

Question

私は、ブートストラップ "タブ"プラグインを使用して、順序付けられていないリストを持っています。コードは次のようになります。

<ul> 
    <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li> 
    <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li> 
    <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li> 
    <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li> 
</ul> 

私は親<li>クラス.activeを持っていないすべての<a>のリンクの色を変更するためにCSS3を使用したいと思います。私はこのような何かを試してみた

：

a:not(li.active>a){ 
    color:grey; 
} 

が、無駄に

。これを行う方法はありますか、間違ったツリーを吠えるのですか？

Answer 1

>,+などのコンビネータとCSS内の:not()の間のスペースは許可されません。 jQueryセレクタとしてのみ使用できます。詳しくはthis other questionをご覧ください。

つまり、liのみで:not()を使用し、> a部分を移動することができます。しかし、これはあなたのulとli要素の構造に依存します：あなたは、そのクラスのli両親とa要素にそれを制限する場合は、

li:not(.active) > a { 
    color: grey; 
} 

は、たとえば、あなたは常に他のセレクタをチェーンできるよう.span3のみ：

li.span3:not(.active) > a { 
    color: grey; 
} 

例えばあなたが親である要素の種類を知っている（あなたがマークアップのコントロールを持っているか、構造が少なくとも予測可能である場合にのみ、このように:not()を使用してに頼ることができること、しかし、覚えておいてください）。たとえば、li.span3 > aを見ているだけで、li.span3にアクティブなクラスがない場合にのみスタイルを適用します。この情報を使用すると、がになるはずの上記のようなセレクタを作成できます。