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 CSS Foundations Advanced Selectors Substring Matching Attribute Selectors

Posted by Petrov von Petrov
Petrov von Petrov
21,916 Points

Why not just [href]?

Hi

I wondered what would happen if I just used [href^="mailto:"] instead of a[href^="mailto:"], and there seems to be no difference, the element is targeted just as well.

So may question is: is there any functional reason to add the a before the []?

Thanks

5 Answers

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

it does seem over specified. According to the W3 standards though it looks to be the valid way to specify the selector (if anyone cares about validation anymore). http://www.w3.org/TR/CSS21/selector.html%23id-selectors . If you want to apply universally then you should use *[href^="mailto:"] . Again, only if you care about validation.

The other thought though is that as we start doing more custom elements in HTML 5, there's the possibility that a custom element may have an href attribute. In this case you would need to specify.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

The first reason that comes to my mind is that the href attribute only applies to the anchor (a) element. The a in your selector tells CSS that it's looking for a specific attribute in a specific element. :-)

Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

Right. But would there ever be an href outside an anchor element? If not (as I think), wouldn't in this case the a element in the selector be superfluous? Since it targets the element just the same, it would certainly appear so. What I'm not certain of is if there is some deeper reason (browser compatibility, for instance) for including it just the same.

It's not a terribly important issue (after all, it's just a character!), but I was curious about it.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I don't think a [href] without the preceding "a" character would select anything.

CSS isn't like Sass in that it doesn't produce error messages. If you make a syntax error in your CSS, I'm afraid the only way you'll know about it is that your styles don't work. But if the style does work, you'll see the changes in the browser.

Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

I'm certain that it would, for I've seen it do it in this very exercise... That's what made me curious in the first place.

Petrov von Petrov
Petrov von Petrov
21,916 Points

Great to see that you took the trouble to check it :)

Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

So, in short, validation on one hand, and preempting the appearance of new elements that use href on the other, are the reasons to specify the anchor element before the href.

Guess they seem like good enough reasons for us to add an extra character...

Thanks for the answer and for the replies.

Cheers