Odd CSS syntax. [class^='icon-'], [class*=' icon-']

原文： https://stackoverflow.com/questions/20322740/odd-css-syntax-class-icon-class-icon

 

I am going through someone else's CSS code at the moment and found something I have not seen before, nor am I able to find anything on W3C schools about these types of selectors. Google also doesn't return anything if I type in "class^=" 

Would appreciate it if someone could shed some light on this please?

-----------------------------------------------------------------------

This is somewhat comprehensively covered here:

http://reference.sitepoint.com/css/css3attributeselectors

Quick summary:

[class^='icon-'] - classes starting with 'icon-' (eg. class='icon-blah blah')
[class$='-icon'] - classes ending with '-icon'   (eg. class='blah blah-icon')
[class*='icon']  - classes containing 'icon'     (eg. class='blah xxx-icon-blah')

It's worth noting that this is a full string matching pattern not a partial matching pattern. So for example, the class:

<div class='mystyle-type'/>

Will match to the selector [class^='mystyle'] but the class:

<div class='active mystyle-type'/>

Will not match, because the string 'active mystyle-type' does not start with 'mystyle'.

This can be problematic with javascript that adds classes dynamically like jquery's 'addClass'.