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

CSS

Posted by Joyia Echols
Joyia Echols
1,678 Points

CSS Selectors 10/10

Add an attribute selector to make h2 tags with only the class "foo" to be underlined.

h2 [class="foo"]{
text-decoration: underline;

}

Don't know what I'm doing wrong.

Thanks in Advance.

2 Answers

Joyia Echols
Joyia Echols
1,678 Points
Joyia Echols
Joyia Echols
1,678 Points

Never mind was thinking in html:

h2.foo {
text-decoration: underline;
}
Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Both should have worked; The h2 AND the space before the brackets may have been the issue.

The conventional way is to in fact use merely .foo.

class is an attribute like anything else between an initial tag statement; therefore any browser that supports the attribute selector syntax/convention element_tag[attribute_name=value] will accept either way.

You shouldn't have to use h2[class=foo] but for that syntax/convention to do its job, it allows you to.

# and . are shortcuts to what would be the most common ways to select html elements to style with CSS instead of using the element's name which would be too broad in most cases.

I tried it out on codepen.io with no problems.