CSS セレクターで特定のクラス名を除外するにはどうすればよいですか?

CSS セレクターでの特定のクラス名の除外

CSS では、セレクターから特定のクラス名を除外する必要がある場合があります。これは、複数の要素にスタイルを適用したいが、特定の要素がそれらのスタイルを継承しない場合に特に便利です。

一般的なシナリオの 1 つは、特定のクラス名の要素を除外し、別のクラス名の要素にスタイルを適用することです。次の例を考えてみましょう:

<code class="html"><a href="" title="Design" class="reMode_design reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

この例では、ホバー時に「reMode_hover」クラス名を持つ要素に背景色を適用したいと考えています。ただし、要素に「reMode_selected」クラス名もある場合は、この色を適用したくありません。

<code class="css">/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

.reMode_hover:hover { background-color: #f0ac00; }</code>

最初のルールが機能することが期待されるかもしれませんが、実際は機能しません。これは、CSS ではクラス名の間のスペースが子孫セレクターを表すためです。したがって、「.reMode_selected .reMode_hover」は、「.reMode_selected の子孫である .reMode_hover 要素を選択する」と解釈されます。

「reMode_selected」要素を正しく除外するには、「not()」セレクターを使用する必要があります。更新された CSS は次のようになります:

<code class="css">.reMode_hover:not(.reMode_selected):hover { background-color: #f0ac00; }</code>

このルールは、.reMode_selected クラス名を持たない .reMode_hover 要素に背景色を適用します。その結果、最初のリンクのみがホバー時に背景色を受け取りますが、2 番目のリンクは受け取りません。

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