0

I have the following:

[class^="fa-icon-"], [class*=" fa-icon-"] {

I know that class^ means starts with but what does class* mean?

2 Answers2

1

That simply means select any element whose class attribute contains a substring of fa-icon-

Demo

So, as I've shared a demo with you, there am selecting any p element having a substring of fa-icon- (Note: The space matters there)

So it will select element say 

<p class=" fa-icon-">Hello</p>

The above selector will also select something like 

<p class=" fa-icon-blah">Hello</p>

Demo 2

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
1

Represents an element with the class attribute whose value contains at least one instance of the substring " fa-icon-".

From the w3c spec:

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

Danield
  • 121,619
  • 37
  • 226
  • 255
  • But is that not covered anyway with the class^ ? –  Oct 01 '13 at 06:20
  • No, because class^ only covers classes which **start** with that value (in your case fa-icon-) – Danield Oct 01 '13 at 06:22
  • Okay but the above is class*=" fa-icon-" the space means it starts with. Sorry to be confusing but do you see what I mean. I can't understand the point of the class* in this example. –  Oct 01 '13 at 06:24
  • Take a look at this fiddle: http://jsfiddle.net/danield770/V9ScV/3/ I suspect the the intention of the class* is to match the class when other classes are also present.... (even though you would be better of using [att~=val] in that case) – Danield Oct 01 '13 at 06:30