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

css, css-selectors, syntax

Solution

[key^='starts_with'] Will look for elements that have the 'key' attribute whose value starts with 'starts_with'. See CSS3 selectors for more details.

Example:

<div key='starts_with_bacon'>this will be selected with [key^='starts_with']</div>

Problem

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^=" ``` [class^='icon-'], [class*=' icon-'] { display:inline-block; background:url(../images/sprite.png) no-repeat 0 0; border:none; text-align:center; vertical-align:middle; *display:inline; *zoom:1; } ``` Would appreciate it if someone could shed some light on this please?

Original source