web-dev-qa-db-ja.com

クラス「B」ではなくクラス「A」でdivを選択するにはどうすればよいですか？

私はいくつかのdivを持っています：

<div class="A">"Target"</div>
<div class="A B">"NotMyTarget"</div>
<div class="A C">"NotMyTarget"</div>
<div class="A D">"NotMyTarget"</div>
<div class="A E">"NotMyTarget"</div>

Targetを含むdivを取得するが、NotMyTargetを含むdivを取得しないCSSセレクターはありますか？

ソリューションはIE7、IE8、Safari、Chrome、Firefoxで動作する必要があります

編集：これまでのところ、ニックは最も近いです。それは不器用で、私は解決策が好きではありませんが、少なくともそれは動作します：

.A
{
   /* style that all divs will take */
}
div.B 
{
  /* style that will override style .A */
}
csscss-selectors
55
MedicineMan

属性セレクターを使用して、クラスが1つしかないdivに一致させることができます。

div[class=A] {
  background: 1px solid #0f0;
}

複数のクラスを持つ別のdivを選択する場合は、引用符を使用します。

div[class="A C"] {
  background: 1px solid #00f;
}

一部のブラウザーは、属性セレクター構文をサポートしていません。いつものように、「一部のブラウザ」はIE 6以前のolder曲表現です。

参照： http://www.quirksmode.org/css/selector_attribute.html

完全な例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .A { font-size:22px; }
    .B { font-weight: bold; border: 1px solid blue; }
    .C { color: green; }

    div[class="A"] {
      border: 1px solid red;
    }
    div[class="A B"] {
      border: 3px solid green;
    }
  </style>
</head>
<body>
  <div class="A">"Target"</div> 
  <div class="A B">"NotMyTarget"</div> 
  <div class="A C">"NotMyTarget"</div> 
  <div class="A D">"NotMyTarget"</div> 
  <div class="A E">"NotMyTarget"</div> 
</body>
</html>

EDIT 2014-02-21：4年後、:notは広く利用可能になりましたが、この特定のケースでは冗長です。

.A:not(.B):not(.C):not(.D):not(.E) {
  border: 1px solid red;
}

残念ながら、これはIE 7–8の質問で指定されているように動作しません： http://caniuse.com/#search=:not

48
Ron DeVera
.A:not(.B) {}

しかし、誰がそれをサポートしていないと思いますか…確かに、IE <= 8。

30
Ms2ger

（CSS 3まで）できる最善の方法は、この場合のスタイルを、クラスA B in A、次のように：

.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }
15
Nick Craver