Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Dave Scott
2,179 PointsUnqualified Attribute Selectors not supported in CodePen?
It would appear that CodePen does not support unqualified attribute selectors like [class]. Using "a [class]" or "[class="myclass"]" rendered the expected results, but using [class] alone applied the attribute at the [html] level.
As a student this was quite confusing until I was able to identify what was going on (it worked correctly in JSFiddle). Can you confirm if I'm correct in my troubleshooting?
Also - is there a reason we are not allowed to use the Treehouse code editor for these lessons? It seems counter intuitive to use the Treehouse editor for the earlier lessons and CodePen for subsequent lessons.
3 Answers
James Barnett
39,199 PointsIn codepen, there's an option to add classes to the <html> element.
You'll only see this behavior in codepen's editor view when selecting for [class], you don't see this behavior if you view a pen in full page view.
James Barnett
39,199 PointsWithout seeing your codepen it's hard to know where your issue is, however it's not a limitation of codepen.
edit: This is incorrect, see my answer above
This works just fine
html:
<a class="test">test</a>
css
[class] { color: red;}
demo
http://codepen.io/jamesbarnett/pen/eAqDd
> Also - is there a reason we are not allowed to use the Treehouse code editor for these lessons? It seems counter intuitive to use the Treehouse editor for the earlier lessons and CodePen for subsequent lessons.
The CSS Foundations course was made before Workspaces existed. You can use any editor you like to follow along, including Workspaces.
Dave Scott
2,179 PointsThanks for the answer James, but to see the problem, I believe you'll also need a tag without a class. Something like this...
html:
<a class="test">test</a>
<p>The problem is that every tag is colored red.</p>
css
[class] { color: red;}
Dave Scott
2,179 PointsAlso, in regards to using Workspaces in lessons created before Workspaces existed - the option to edit the code in Workspaces is replaced with a link to use CodePen. You can see what I mean if you check out the "Code Playground" section visible in my current lesson, in this screencapture:
http://cl.ly/image/192w1W1a0g3W
Is there a work around to launch workspaces while in the CSS Foundations course? Thanks in advance.
Dave Scott
2,179 PointsI think I sorted out the Workspaces work around (navigate to Workspaces using menu > launch workspace > return to lesson), but code question still lingers...
James Barnett
39,199 PointsYou can also go to http://teamtreehouse.com/workspaces/new if you want to create a new workspace directly