Geek asks and answers

Many substring selectors

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

+3
source share
2 answers

It works:

.btn[class*="icon-"]

It will be so

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

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

+8
source

icon-Startup Search

You can try the following: the icon class should be the first in the attribute:

[class^='icon-'].btn

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

Search icon-Inside (Warning!)

You can modify the query to base a class search in a substring:

[class*='icon-'].btn

, , icon-, myicon-1 noicon-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 -->
+4

More articles:


All Articles