BinaryDevelop
  1. ホーム
  2. css

クラス "A "のdivを選択し、クラス "B "のdivを選択しないようにするにはどうしたらよいですか？

2023-09-25 22:22:05

質問

私はいくつかの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>

を含むdivを取得するためのCSSセレクタはありますか？ Target を含む div は取得できないのですが NotMyTarget ?

IE7、IE8、Safari、Chrome、Firefoxで動作する必要があります。

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

.A
{
   /* style that all divs will take */
}
div.B 
{
  /* style that will override style .A */
}

どのように解決するのですか？

属性セレクタを利用して div という、クラスを一つしか持たない 

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

別の div を選択したい場合は、引用符で囲んでください。 

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

一部のブラウザは属性セレクタの構文に対応していません。いつものように、"some browsers" は IE 6 およびそれ以前のブラウザのための婉曲表現です。

こちらもご覧ください。 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>

2014-02-21を編集しました。 4年後 :not は、この特定のケースでは冗長ですが、現在広く利用可能です。 

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

残念ながら、質問で指定されているIE7-8では動作しません。 http://caniuse.com/#search=:not

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します