web-dev-qa-db-ja.com

CSSセレクターで特定のクラス名を除外する方法は？

ユーザーがマウスでクラス名が"reMode_hover"の要素にカーソルを合わせたときに、背景色を適用しようとしています。

しかし、要素alsoに"reMode_selected"がある場合、色を変更したくない

注：何らかの制限された環境で作業しているため、JavaScriptではなくCSSのみを使用できます。

明確にするために、私の目標はホバー上の最初の要素に色を付けることですが、2番目の要素には色を付けないことです。

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>

最初の定義が機能することを期待して以下で試しましたが、機能しません。何が間違っていますか？

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}
htmlcsscss-selectors
112
masato-san

1つの方法は、複数クラスセレクターを使用することです（子孫セレクターであるため、スペースはありません）。

.reMode_selected.reMode_hover:hover 
{
    background-color: transparent;
}

http://jsfiddle.net/geatR/

別の方法は、:not()セレクタを使用することです

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

http://jsfiddle.net/geatR/1/

199
Explosion Pills

最新のブラウザでは次のことができます。

.reMode_hover:not(.reMode_selected):hover{}

互換性情報については、 http://caniuse.com/css-sel を参照してください。

24
imsky

方法1

コードの問題は、.remode_hoverのdescendantである.remode_selectedを選択していることです。したがって、コードを正しく動作させるための最初の部分は、そのスペースを削除することです

.reMode_selected.reMode_hover:hover

次に、スタイルが機能しないようにするには、:hoverで設定されたスタイルをオーバーライドする必要があります。つまり、background-colorプロパティに対抗する必要があります。最終的なコードは

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

フィドル

方法2

別の方法は、他の人が述べたように、:not()を使用することです。これは、括弧内にクラスまたはプロパティが指定されていない要素を返します。この場合、そこに.remode_selectedを配置します。これは、.remode_selectedのクラスを持たないすべての要素を対象とします

フィドル

ただし、CSS3で導入されたため、この方法はお勧めしません。したがって、ブラウザーのサポートは理想的ではありません。

方法3

3番目の方法は、jQueryを使用することです。 .not()セレクターをターゲットにできます。これは、CSSで:not()を使用するのに似ていますが、ブラウザーのサポートがはるかに優れています

フィドル

11
Cody Guldner