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 Hasan Volkan Kilic
Hasan Volkan Kilic
312 Points

Feeling confused about the hierarchy between selector elements here.

My confusion is derived from the code below:

h1, h2 { color: #fff; }

a { color: #6ab47b; }

In this code, "h1" and "h2" had already been anchored in html file. So, I felt like the code downward would have dominated the previous one but h1 and h2 were still having the same colour. As I tried to understand the hierarchy between those both mentally and practically, now I am feeling very confused. Can you please explain me why colouring anchored links does not override previous code stating another colour for already anchored h1 and h2 elements?

Neil Kennedy
Neil Kennedy
2,957 Points

Can you show your HTML? It would help to understand your question a little better. Is the a tag nested inside the <h1> or <h2>?

3 Answers

Neil Kennedy
Neil Kennedy
2,957 Points

Your issue is because you have the <h1> and <h2> tags wrapped inside the <a> tags. This means the text within these tags take their styling from the heading tags. If you restructured your HTML to:

<h1><a href="index.html">Name goes here</a></h1> <h2><a href="index.html">Profession</a></h2>

This would mean the text is wrapped directly in the <a> tags and the styling of the <a> would be applied rather than the H1 or H2

Stephen Viesto
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Viesto
Full Stack JavaScript Techdegree Student 4,997 Points
Stephen Viesto
.a{fill-rule:evenodd;}techdegree
Stephen Viesto
Full Stack JavaScript Techdegree Student 4,997 Points

If your elements are styled directly in the html tags, that comes first.

I'm not sure if that's what you're asking or not, but hopefully it helps.

Hasan Volkan Kilic
Hasan Volkan Kilic
312 Points
Hasan Volkan Kilic
Hasan Volkan Kilic
312 Points

Dear Neil, the related part of my html file is below:

<a href="index.html"> <h1>Name goes here</h1> <h2>Profession</h2> </a>

So the h1 and h2 elements are nested inside anchor tags. Please let me know if I can provide you with any additional information.

I'd like to thank you both for prompt response.