css - リンクに「フォルダ」のクラスがない場合にのみホバーを行うにはどうすればよいですか?

Question

私は次のものを持っています：

<a class="folder"><span>Background</span></a>

および次の CSS:

        ul.arbo li > a:hover span,
        ul.arbo li > a.current span {
            background: #999999;
        }

リンクにフォルダのクラスがある場合、適用されないように CSS を変更するにはどうすればよいですか。つまり、上記の HTML には適用されません。

score 4 · Accepted Answer

次のように、css で否定疑似クラスセレクターを使用して実行でき:notます。

:not(.folder) {

}

実際のデモを参照してください(insertusernamehere によって提供されます)。

score 2 · Accepted Answer

CSS3 には:not()セレクターがあり、これを CSS に追加できます (または、いずれかの方法で jQuery を使用してこれを行うこともできます)。これは新しいブラウザでのみ機能します。

:not(.folder)

あなたのインスタンスでは：

ul.arbo li > a:not(.folder):hover span,
ul.arbo li > a:not(.folder).current span { }

score 0 · Accepted Answer

これにはJavaScriptやjQueryは必要ありません。また、CSS3がなくても実行できます（サポートする予定のブラウザーによっては、これが関係する場合があります）。

次のように、特定の要素で背景が変更されないようにする別のルールを追加するだけです。

ul.arbo li > a.folder:hover span
{
    background: inherit;   
}

score 0 · Accepted Answer

:not(.folder) {

}

良い解決策です。どのブラウザを使用したいかを確認することを忘れないでください。

：notセレクターはCSS3セレクターであり、すべてのブラウザーがそれをサポートしているわけではありません...たとえば、IE8以前は：notセレクターをサポートしていません。

4 に答える 4