CSS の特定のクラス内にない入力要素をターゲットにするにはどうすればよいですか?

否定なしの CSS セレクター

CSS では、専用の "ではありません」セレクター。この制限は Web 開発者によって何年も前から認識されており、代わりの解決策を模索する必要があります。

次の CSS ルールを検討してください:

.classname input {
  background: red;
}

このルールは、内部のすべての入力フィールドに赤い背景を割り当てます。クラス名「classname」を持つ HTML 要素。ただし、「classname」要素内の入力フィールドを赤い背景スタイルから除外したいとします。これはどのように実現できますか?

現在のブラウザのサポート

残念ながら、現在の Web ブラウザは CSS のネガティブ セレクターをサポートしていません。提供されている例は、CSS のみを使用して実現することはできません。

代替ソリューション

CSS にはネガティブ セレクターがありませんが、代替ソリューションが存在します。

• JavaScript または jQuery を使用する: jQuery などの JavaScript フレームワークでは、特定の条件に一致しない要素を選択するための :not() などのメソッドが提供されます。

<code class="js">$j(':not(.classname)>input').css({background:'red'});</code>

• ネストされたルール: ネストされたルールを使用すると、スタイルから特定の要素を間接的に除外できます:

input {
  background: #ccc;
}

.classname input {
  background: red;
}

この例では、すべての入力フィールドの背景がデフォルトで灰色になります。クラス名「classname」を持つ要素内では、入力フィールドはこのスタイルを赤色の背景でオーバーライドします。このアプローチは、位置に関係なく、「classname」要素内のすべての入力フィールドのスタイルに影響することに注意してください。

CSS ネガティブ セレクターのブラウザーのサポートについては何年も議論されてきましたが、まだサポートされていないことに注意してください。この記事の執筆時点では正式な実装はありません。ブラウザ テクノロジーが進化し続けるにつれて、この機能は将来利用できるようになる可能性があります。

以上がCSS の特定のクラス内にない入力要素をターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。