CSS：すべての子孫のnot（）セレクタ

Question

：not（）セレクタが次の例で動作するようにするにはどうすればよいですか？

HTML

<div id="content"> 
    <div id="one"> 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
</div> 
    <div id="two"> 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
</div> 
</div> 

CSS

#content a:not(.mystyle) { 
    color: green; 
} 

JSFIDDLE

Link to jsfiddle

重要

私のブログに外部ウィジェットのスタイルを設定しようとしています。 HTMLへのアクセス権がないので、HTMLを変更することはできません。私はCSSのみのソリューションを探しています。

Answer 1

、:not()セレクタはa要素に適用されます。これは、.mystyleクラスを持たないaタグのみを選択します。

#content > * > *:not(.mystyle) a { 
    color: green; 
} 

上記は、すべての彼らの降順aタグの緑の色、.mystyleクラスを持っていない任意の子孫ダウン2つのレベルを選択します。そのような

#content > div > div:not(.mystyle) a { 
 
    color: green; 
 
}

<div id="content"> 
 
    <div id="one"> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
    <div id="two"> 
 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
</div>

Answer 2

4つのリンクがあります。すべてのリンクは緑色でなければなりません。ただし、class = "mystyle"のリンクは例外です。

なぜ、:not()を使用していますか？既存のクラスに色を付けるだけです。あなたの例で

* { color: green; } 
 

 
.mystyle * { color: red; }

<div id="content"> 
 
    <div id="one"> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
    <div id="two"> 
 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
</div>

Answer 3

：以下

は実施例でありますか？ ：

div:not(.mystyle) > p > a { color: green; }

<div id="content"> 
 
    <div id="one"> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
    <div id="two"> 
 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
</div>

Answer 4

あなたは以下のスニペットで確認することができますこれを行う方法。

div:not(.calc) > p { 
 
    color: green; 
 
}

<div id="content"> 
 
<div><p>Hi</p></div> 
 
<div ><div class="calc"><p>Hi</p></div></div> 
 
<div><p>Hi</p></div> 
 
</div>