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

HTML How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

Posted by Edward Thompson
Edward Thompson
961 Points

Why 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?

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

I'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; }

3 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Why 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
Tomasz Chiossi
7,545 Points
Tomasz Chiossi
Tomasz Chiossi
7,545 Points

The 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
Edward Thompson
961 Points
Edward Thompson
Edward Thompson
961 Points

I 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
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

sorry 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).