CSS not equalsセレクターはありますか?


116

CSSに!=(等しくない)のようなものはありますか?たとえば、次のコードがあります。

input {
 ... 
 ...
}

しかし、いくつかの入力については、これを無効にする必要があります。クラス「リセット」を入力タグに追加することでそれを行いたい、例えば

<input class="reset" ... />

そして、CSSからこのタグをスキップするだけです。

どうすればできますか?

私が見ることができる唯一の方法は、入力タグにクラスを追加して、CSSを次のように書き直すことです。

input.mod {
 ...
 ...
}

あなたはあなたの質問に答えたと思います。スタイルをinput.modに配置し、目的の入力タグにクラス 'mod'を追加します。
Nazmul 2010

回答:


157

CSS3では:not()フィルターを使用できますが、まだすべてのブラウザーがCSS3を完全にサポートしているわけではありません。そのため、すべての主要ブラウザーで現在 サポートされている何をしているのかを知っていることを確認してください(かなり長い間使用されてきました。これは古い答えです) ...)。

例:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

そしてCSS

input:not(.avoidme) { background-color: green; }

注:この回避策はもう必要ありません。ここでは、説明のために残しておきます。

CSS3を使用したくない場合は、すべての要素にスタイルを設定してから、クラスでリセットできます。

input { background-color: green; }
input.avoidme { background-color: white; }

OMG ...私はそれが存在することを知っていました:)うん、そうです!ありがとう。
Alex Ivasyuv、2010

2
主にIE8(およびそれ以前のリリース)からのサポートが不足しています。誰かがポリフィルに興味がある場合:selectivizr.com
franzlorenzon 2013年

1
@Guru:複数の:not()セレクターをチェーンできます。input:not(.avoidme):not(.avoidmetoo)どちらかのクラスのinput:not(.avoidme.andme)要素を避け、両方のクラスの要素を避けます。
Tomas Aschan

1
@TomasLyckenは、実際には、複数のセレクタを使用すると、CSSでのトリッキーな1つ、例えばある:not(.this.that) { }MAYの作品、しかしとしてのあなたは、このような何かをする場合は:not(.this, .that) { }、あなたが落ちるよ、あなたは彼らのようなデイジーチェーンする必要があります:not(.this):not(.that)。私はあなたがおそらくこれを知っていることを理解しています、私は将来の読者を助けようとしています:)
Can O 'Spam

1
今後の読者のためにここにコメントを残してください:@SamSwift웃のコメントはまだ正確ですが、リストのサポートは(たぶん)将来行われる予定です。ただし、現時点では、内部では単一のセレクターのみがサポートされてい:not()ます。
Tomas Aschan 2017

24

また、CSSでのみリセットクラスの変更を「元に戻す」ことによっても実行できます。

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

8

CSS3にはがありますが:not()、まだすべてのブラウザーに実装されているわけではありません。ただし、IE9 Platform Previewに実装されています。

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

その間、あなたは昔ながらの方法に固執する必要があります。


6

次のような属性をターゲットにすることでこれにアプローチすることもできます。

input:not([type=checkbox]){ width:100%; }

この場合、「チェックボックス」タイプではないすべての入力の幅は100%になります。


4

興味深いのは、JQueryを使用してDOM要素を選択するためにこれを試してみただけです。:)

$("input[class!='bad_class']");

このページには168個のdivがあり、 'comment-copy'クラスがありません

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

11
[attr!="value"]あるjQueryの専用セレクタapi.jquery.com/attribute-not-equal-selector
XEC

これはCSSとどのような関係がありますか?
devlin carnate 2016年

@devlincarnateの「CSS」セレクターはJS(2013年頃)に組み込まれているため、人々はそれを検索します。
Nick T

0

class = "reset"の代わりに、class = "valid"を使用してロジックを逆にすることができます。これをデフォルトで追加し、クラスを削除してスタイルをリセットできます。

だからあなたの例とトーマスから

input.valid {
 ... 
 ...
}

そして

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>

2
OPは適用したくなかったので、私は、デフォルトのスタイルを持っていなければならない要素の数が大幅にすべきものを超えたことをクラスにして適用することによって、「リセット」にできることの全体的なアイデアを考えて任意のにクラスを要素の大部分。
Tomas Aschan 2010
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.