13

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?

1
  • 4
    W3Schools is not W3C - they are not related in any way other than the common abbreviation "W3".
    – BoltClock
    Dec 2, 2013 at 12:00

3 Answers 3

29

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

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.