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
Edward Thompson
961 PointsWhy does the "a" selector work for the declaration "text-decoration: none;" but not with the "h1" or "h2" selectors?
The declaration "text-decoration: none;" works fine when using "a" as the selector. But when I tried using "h1" or "h2" as the selector, the links were underlined again.. Anyone know what might be the problem? Is h1 and h2 too specific or something?
3 Answers
Steven Parker
229,732 PointsWhy would you target "h1" if you want to remove the underlining on links - do you have links inside h1's? Even so, I don't think text-decoration gets inherited, so you still have to target the links (anchors) directly.
Tomasz Chiossi
7,545 PointsThe problem is because h1, h2 and rest are not underlined by default as anchor. So if you have 'a' inside 'h1' you still need to style 'a'.
Edward Thompson
961 PointsI was using thiscode that Nick Pettit used in his training video:
<a href="index.html"> <h1>Edward Thompson</h1> <h2>Designer</h2> </a>
I guess it makes sense to target the link itself rather h1. My thinking behind it was that h1 was what was being underlined on the page, so I was trying remove the decoration from it. And thanks for all the input everyone! Steven Parker helping me out on another question of mine! haha
Simon Coates
28,694 Pointssorry if i made things murkier. i had thought your anchor was nested in the h1, not the other way around. If you have more trouble with this kind of thing, you might want to skip ahead and take a look at the development tools video as this helps in diagnosing which styles are being applied, and where they are coming from. The real issue with this kind of thing is always going to be understanding specificity and the cascade - which are admittedly tricky. (using the shortcut of just adding a class or an id to target an element might work, but it can be a crutch to bypass the understanding needed to base style targeting on page structure).
Simon Coates
28,694 PointsSimon Coates
28,694 PointsI'd guess the default styling for anchor tag is more specific and wins out. If you add a class or try a more specific selector, then the text-decoration of none should apply. for example, h1 a { text-decoration: none; }