CODEWITHSUNDEEP
csssyntaxcss-selectors
SixfootJames
SixfootJames

Reputation: 1871

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^="

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

Upvotes: 13

Views: 19245

Answers (3)

Suyash Kumar Singh
Suyash Kumar Singh

Reputation: 173

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

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

Upvotes: 1

Doug
Doug

Reputation: 35186

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

Upvotes: 30

Jim Pedid
Jim Pedid

Reputation: 2780

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

Upvotes: 18

Related Questions