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 Styling Web Pages and Navigation Style the Image Captions

Simon Dein
Simon Dein
4,772 Points

I'm confused from the cascading of the colors set in css from this video.

Hi,

I've got a couple of questions.

  1. I don't get how come that, when the color of the image captions is set with the #GALLERY LI A P-selector, the color changes though I have an anchor (a) selector further down in my document that sets it to another color. Shouldn't the anchor selector coming further down In my document have the "last word" so to speak?

  2. How come you set a font color first in the GALLERY LI-selector for then to change it afterwards in the more specific #GALLERY LI A P-selector?

  3. Why do the footer apply the float when it's not nested in the #GALLERY LI?

Any answers will be very welcomed! I've ripped my hair out in frustration for the last hour trying to figure these things out.

Thanks!

3 Answers

Stayci Hanson-Herman
Stayci Hanson-Herman
7,713 Points

Hi Simon, I believe it's because the #gallery item is an ID selector which is more specific than an anchor selector. It will always override selectors that are less specific even if they come after. ID selectors are the most specific, then Class selectors, then other selectors.

Simon Dein
Simon Dein
4,772 Points

Thanks for the answer! :) Makes a little more sense. I've just edited my question while you answered - do you have any answers to any of the 2 questions I added? Thanks!

Terrance Corley
Terrance Corley
11,990 Points

Hi Simon, to help answer some of your questions...

2) I believe it's just for insurance purposes to make sure that the paragraph text retains the right color; kinda how Nick also sets the body background color to white even though it's white by default.

3) When the parent element only contains floated elements it can cause the height to collapse. This article can do a better job at explaining what happens in detail and how to correct it.

Hope this helps! Happy coding!

Simon Dein
Simon Dein
4,772 Points

Thanks for your answers Terrance Corley and Stayci Hanson-Herman! And specially for the article you linked Terrance! I appreciate it :)

Have a great day! Simon

Terrance Corley
Terrance Corley
11,990 Points

Glad I could help! Likewise!