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

Question

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?

W3Schools is not W3C - they are not related in any way other than the common abbreviation "W3". — BoltClock, Dec 02 '13 at 12:00

score 29 · Answer 1 · answered Jan 20 '14 at 02:48

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

score 18 · Accepted Answer · answered Dec 02 '13 at 07:15

18

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

answered Dec 02 '13 at 07:15

Jim Pedid

2,730
3
23
27

2

Thanks Jim! Just went through W3C again and missed it. http://www.w3schools.com/cssref/css_selectors.asp – SixfootJames Dec 02 '13 at 07:17
1

You can find an official list from the W3 in the specification for CSS3 selectors: http://www.w3.org/TR/css3-selectors/#selectors – Jim Pedid Dec 02 '13 at 07:19

score 1 · Answer 3 · answered Apr 03 '15 at 14:45

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

you can do two things with it 1. define a css property like

.icon-otherClass {
/*
*CSS Property
*/

}

it means .icon-otherClass also contain the property that is already defined in [class^='icon-'] { /css property/}

use like <div class="icon-otherProperty"> </div> <i data-time-icon="icon-otherPropery" data-date-icon="icon-otherPropery"> </i>

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

3 Answers3