Multiple matching substring selectors

Question

I'm trying to create a rule to match all classes beginning with icon- which also have the btn class. [class^="icon-"] { matches the first condition, but how do I add "that also have the .btn class?

Answer 1

This works:

.btn[class*="icon-"]

So will,

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

Check out my fiddle: http://jsfiddle.net/VaACP/1/

Answer 2

Finding icon- at the Start

You could try the following - the icon class would need to be first in the attribute:

[class^='icon-'].btn

To this 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 -->

Finding icon- Within (Caution!)

You could modify the query to base the class search on a substring:

[class*='icon-'].btn

But note that this will turn up positive with classes that resemble icon-, like myicon-1 or noicon-2.

Finding icon- Anywhere Within

If you're unsure of where the icon- class will show up in the attribute, you could look for both examples:

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

This will find icon- classes at the beginning, or anywhere within (preceded by a space).

<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 -->