CSS で特定のクラスまたは属性を持たない要素を選択するにはどうすればよいですか?

CSS のクラスおよび属性セレクターの無効化

特定のクラスまたは属性が欠落している要素を選択する必要がありますか? CSS は、:not() 擬似クラスを通じてソリューションを提供します。

:not() 擬似クラス

:not() 擬似クラスを使用すると、次のことが可能になります。セレクターを否定し、指定された条件に一致しない要素を選択します。通常、クラス セレクターは次のように使用されます。

:not(.printable) {
    /* Styles for non-printable elements */
}

同様に、属性セレクターも否定できます。

:not([attribute]) {
    /* Styles for elements without the attribute */
}

例

以下のHTML:

すべてを選択するには「printable」クラスを持たない要素には、次の CSS ルールを使用します。

:not(.printable) {
    background-color: lightgray;
}

これにより、ナビゲーション要素と要素が明るい灰色で強調表示されます。

ブラウザ サポートと代替

IE8 以前では :not() がサポートされていません。代わりに、「printable」クラスを持つ要素のスタイル ルールを作成できます。これが実現できない場合は、制限に対応するためにマークアップを再構築することを検討してください。

考慮事項

display: none の :not(.printable) などのプロパティは、要素とレイアウトの子孫。これを回避するには、代わりに Visibility: hidden を使用します。これにより、非表示の要素がレイアウトに影響を与え続けながら、可視の子孫が表示されるようになります。

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