web-dev-qa-db-ja.com

2つのクラスが存在する場合にのみCSSで要素をターゲットにできますか？

おそらく既にご存知のように、スペースで区切られた要素に複数のクラスがある場合があります。

例

<div class="content main"></div>

CSSを使用すると、divを.contentまたは.main。 およびその場合のみ両方のクラスが存在する場合にターゲットにする方法はありますか？

例

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

最初のdivのみを取得するためにどのCSSセレクターを使用しますか（.content:first-child または類似）？

csscss-selectors
79
alex

はい、それらを連結するだけです：.content.main。 CSSクラスセレクター を参照してください。

ただし、バージョン6までのInternet Explorerは複数のクラスセレクターをサポートせず、最後のクラス名のみを尊重することに注意してください。

124
Gumbo

それだけのために（これを行うことは本当にお勧めしません）、そこに別の方法があります

.content[class~="main"] {}

または：

.main[class~="content"] {}

参照： http://www.w3.org/TR/CSS2/selector.html

E [foo〜= "warning"]「foo」属性値がスペースで区切られた値のリストであるE要素に一致します。 「警告」とまったく同じ

デモ： http://jsfiddle.net/eXrSg/

これが実際に役立つ理由（少なくともIE6の場合）：

IE6は複数のクラスをサポートしていないため、.content.main、を使用できませんが、IE- 7.js 属性セレクターを有効にしますが、複数のクラスに関しては失敗するようです。 IE6では、属性セレクターを有効にするJavaScriptを使用してこの回避策をテストしましたが、andいですが、動作します。

IE6で複数のクラスセレクターをサポートするスクリプトをまだ見つけていませんが、属性セレクターを有効にする多くのスクリプトを見つけました。誰かが知っている場合はそれが機能する、私はこの回避策を取り除くことができるようにコメントで私に叫びを与えてください。

12
Wesley Murch