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

Posted by Reza Sorasti
Reza Sorasti
491 Points

Why a descendant selector is not being used for paragraph in the footer element?

In the course called how to build a website, the instructor has the below code for navigation. <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> To style a navigation, by giving a color to a text in the above links, the instructor uses “descendant selector” like here: nav a { color: white; } My question is how come to give a style to a text color of a paragraph in the footer, he is not using “descendant selector” like above, instead he has it like this:

<style> <footer> Color: green; </footer> <style> … <footer> <p> © 2014 Nick Pettit.</p> </footer>

Any help is appreciated!

2 Answers

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

The instructor's code is probably a bit different from what you show.

Your line as shown contains several syntax errors, so I'm guessing that's not quite what was shown in the video. I would check, but you did not give a link for the video.

But to answer your question (and again, without seeing the video), I would guess that a descendant selector is not used because the intention was to color all text in the footer, not just links as was done in the earlier code.

If that's not it, provide a link to the video and I'll take another look.

UPDATE — now that I've seen the video, this is actually explained at about 09:03 in the video as a result of "selector specificity". So just a "footer" was enough to color the text in the footer, but since the text in the header is all inside links, you need a more specific selector that targets the links directly to change their color. But you'll notice that the background changed color even before he added the extra term to the selector.

Reza Sorasti
Reza Sorasti
491 Points
Reza Sorasti
Reza Sorasti
491 Points

The video is under the course called “How to Make a Website.” Under that course, there is a section called, “CSS: Cascading Style Sheets”, under it first sub-video called “What is CSS?” It is around the 7th minutes down into that first video. Here is the link to the video: https://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/what-is-css The instructor wrote the code to change the color of footer’s text to white: … <style> footer { Color: white; Background-color: orange; } </style> … Later on in that same video around the 9th minute of the video, he wanted to apply the white text style to nav element instead of the footer element. So he changed the above code to the below code by changing the footer selector to nav selector: … <style> nav { Color: white; Background-color: orange; } </style>

But for the above code, he needed to change the element selector “nav” to descendant selector “nav a” in order to change the text of the navigation links to white. But he didn’t not have to do that for the footer to change the text of the footer to white. My question is why? Why didn’t we have to do it like this in order to change the texts of the footer to white? <style> footer p { Color: white; Background-color: orange; } </style>

Thanks for your help!