1. ホーム
  2. html

[解決済み] CSSのnot equalsセレクタはありますか?

2022-08-18 02:53:50

質問

CSSで!=(not equal)のようなものはありますか? 例:以下のようなコードがあります。

input {
 ... 
 ...
}

というように、入力の種類によっては、これを無効にする必要があります。これを行うには、例えば、入力タグにクラス "reset" を追加したいと思います。

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

と記述し、CSSからこのタグを読み飛ばすだけです。

どうすればいいのでしょうか?

inputタグにclassを付けて、CSSを以下のように書き換えるしかないでしょう。

input.mod {
 ...
 ...
}

どのように解決するのですか?

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