css - 複数の一致する部分文字列セレクター

Question

icon-クラスもあるクラスで始まるすべてのクラスに一致するルールを作成しようとしていますbtn。[class^="icon-"] {最初の条件に一致しますが、「。btnクラスもある」を追加するにはどうすればよいですか？

Answer 1

これは機能します：

.btn[class*="icon-"]

そうなるでしょう、

[class*="icon-"][class~="btn"]

私のフィドルをチェックしてください：http://jsfiddle.net/VaACP/1/

Answer 2

開始icon-時の検索

次のことを試すことができます-アイコンクラスは属性の最初にある必要があります:

[class^='icon-'].btn

このHTMLに

<div class="icon-1 btn">Foo</div>  <!-- Matched -->
<div class="icon-2 btn">Bar</div>  <!-- Matched -->
<div class="btn icon-3">Fizz</div> <!-- Not Matched -->
<div class="icon btn">Buzz</div>   <!-- Not Matched -->

内で見つけるicon-（注意！）

クエリを変更して、部分文字列に基づいてクラス検索を行うことができます。

[class*='icon-'].btn

ただし、これは、 のような、またはに似 たクラスで肯定的になることに注意してください。icon-myicon-1noicon-2

icon-どこでも見つける

クラスが属性のどこに表示されるかわからない場合はicon-、両方の例を探すことができます。

[class^='icon-'].btn, [class*=' icon-'].btn

これicon-により、先頭またはその中の任意の場所 (前にスペースがある) のクラスが検索されます。

<div class="icon-1 btn">Foo</div>  <!-- Matched -->
<div class="icon-2 btn">Bar</div>  <!-- Matched -->
<div class="btn icon-3">Fizz</div> <!-- Matched -->
<div class="icon btn">Buzz</div>   <!-- Not Matched -->