Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Modular CSS with Sass Getting Modular with Mixins and Functions Colors with Sass Maps

Max Weir
Max Weir
14,963 Points

Confused on the class^="btn" selector

can someone tell me what [class^="btn--"] {} means?

I'm not 100% clear on how this selector works.

Ken Alger
Ken Alger
Treehouse Teacher

Max;

My apologies if my earlier post caused confusion about substring matching attribute selectors. I deleted that post so that others don't receive errant information.

David;

Great catch. I will attribute my statement that this was an example of "the" substring matching attribute selector instead of "a" substring selector to careless word choice and a long day.

Again, sorry for the confusion on my part everyone.

Ken

No worries, Ken. I responded to the post for that exact reason, so it would be clear to anyone who visited.

2 Answers

James Barnett
James Barnett
39,199 Points

[attribute^=something] will match a the value of an attribute that begins with something.

from: Attribute Selector article over on HTML Dog


I'd also recommend you check out the video on substring attribute selectors from the CSS Foundations course.

You might want to consider to checking out the rest of the CSS Foundations course to brush up on some of the more advanced CSS features before continuing with Sass.


If reading is more your style you can also check out the Attribute Selector of the Complex Selectors page on http://learn.shayhowe.com/

Max Weir
Max Weir
14,963 Points

thanks guys for helping me out, it definitely clears it up more, @david does the last string account for a class with the name "btn" anywhere within the class name? e.g btn-highlight, highlight-btn, footer-hightlight-btn etc

Yeah, it does, basically selects any attribute that contains at least one instance of the value you specified.