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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Posted by Otto Mejia
Otto Mejia
744 Points

Why is only the caption in the footer being affected when I have the body selector in the css file?

I'm doing the exercise Use classes in CSS in the lessons How to Make a Website, and the instructor changes color in the caption in the footer using a body selector in the css file. Why is the body selector affecting the footer only? Shouldn't it be affecting other things inside the body as well?

2 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Otto: The body element is about as broad as you can get (other than the html element) with your css. Here, Nick's changing the color of all of the text on the page, but then most elements on the page are also being styled by other, more specific css rules. For example, he has rules set up for the header element, h1, and h2 tags, etc. Since those elements are more specific than the body element, their rules trump the body rules. This is the "cascading" in "cascading style sheets".

You're only seeing the footer text change because it's the only text on the page not covered by a more specific selector. If there was some paragraph text higher on the page, you would also notice its color change.

Hope that makes sense!

Otto Mejia
Otto Mejia
744 Points

I kinda understand a little more now. But the body selector is being written last on the css file. Shouldn't it override the previous commands regardless of how specific it is?

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Nope. More specific selectors will override less specific selectors, no matter where they're written in the file. If you have 2 rules for the same selector, the last rule will win out. For example:

body {
    background: black;
    color: white;
}
a {
    color: red;
}
body {
    color: blue;
}

The body will have a black background and blue text. The color attribute in the later body declaration overrides the earlier declaration, but since we're not changing the background color, it will remain black.

All a elements will be red because a is more specific than body.

Does that make sense?

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Sorry to be unclear. The specificity of a selector doesn't have anything to do with the number of rules associated with it. Just because our first body declaration has 2 rules doesn't make it more specific than the second. Since they're targeting the same exact thing, they're equally specific.

When you have two declarations that are pointing to the same thing, the latter overrides the former. However, it's also important to note that you're only overriding conflicting rules. Since they both try to set the color of the text, the second rule overrides the first. But since the second body declaration doesn't say anything about the background, the first background rule carries over.

Googling css specificity can bring up some pretty daunting articles (like Mozilla's Developer Network, which gets super technical), but this article is nice and friendly and should give you a better understanding of specificity.

Otto Mejia
Otto Mejia
744 Points
Otto Mejia
Otto Mejia
744 Points

Won't the first body selector make the text color white since it is more specific than the second body selector which makes it blue?

Otto Mejia
Otto Mejia
744 Points

Thank you. I can now see why my footer was only affected, and I can see why the example you gave me sets it to a black background with blue text. I have an even better understanding of the specificity. I will check out the article you suggested myself.