☰

親のクラスをテストするための CSS3 :not() セレクター 質問する

tag-icon • tag-icon css css-selectors
親のクラスをテストするための CSS3 :not() セレクター 質問する

私は、bootstrap の「tabs」プラグインを使用して、順序なしリストを作成しています。コードは次のようになります。

<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>

<a>CSS3 を使用して、親に<li>クラスがないすべてのリンクの色を変更したいと思います.active。

私は次のようなことを試しました:

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

しかし、役に立ちませんでした。これを行う方法はあるのでしょうか、それとも私が間違った方向に進んでいるのでしょうか?

ベストアンサー1

>、+および子孫のためのスペースなどのコンビネータは:not()CSSでは許可されていません。これらはjQueryセレクタとしてのみ許可されています。詳細については、この他の質問。

:not()そうは言っても、を単独で使用しli、 部分を移動することはできるかもしれませんが、これはと要素> aの構造によって異なります。ulli

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

たとえば、そのクラスの親を持つ要素.span3のみに制限したい場合など、他のセレクターをいつでも連鎖させることができます。ali

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

:not()ただし、マークアップを制御できるか、構造が少なくとも予測可能である場合（親がどのような要素であるかを知っている場合など）にのみ、この方法で を使用できることに注意してください。たとえば、あなたのケースでは のみを見てli.span3 > a、 にli.span3アクティブクラスがない場合にのみスタイルを適用します。この情報を使用して、上記のいずれかのようなセレクタを構築できます。すべき期待通りに動作します。

おすすめ記事