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 Gunhoo Yoon
Gunhoo Yoon
5,027 Points

CSS some curiosity.

If I have this html,

<body>
  <a>foo</a>
</body>

Why doing something like this

body {
  color: green;
}

doesn't affect 'a' element's color property but doing something like that

body * {
  color: green;
}
/*or*/
a {
  color: green;
}

affects it? ('a' element is considered visited)

3 Answers

Derrick Mull
Derrick Mull
18,518 Points
Derrick Mull
Derrick Mull
18,518 Points

when you write:

body * {

}

You're basically saying *(everything) in the BODY should have the color of green.

also, the anchor tag without 'href' will turn green on:

body {
 color: green;
}

It has to do with some rules on inheritance, but it escapes me at the moment.

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Thanks but sorry, it doesn't quite answer my question. I think I mis-elaborated the question.

What I'm curious is how selecting body doesn't override 'a' element's pseudo state but, directly selecting 'a' can override it.

Karolin Rafalski
Karolin Rafalski
11,368 Points
Karolin Rafalski
Karolin Rafalski
11,368 Points

The color property applies to text color and text decorations only and will not affect other components of an element. It seems that anchors are a not considered text with this property.

more information: https://developer.mozilla.org/en-US/docs/Web/CSS/color

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Thanks but I think I should really re-elaborate my question since it's misleading, sorry for that.

Any element that contains text can be colored and this is same with anchor tag because once it is created with text, it get a text value which can be colored like what MDN says.

The curiosity I'm having is the inheritance of CSS. Because when you set color using body selector, all of the descendant elements also inherits the color by overriding the default browser style. However, this doesn't seem to apply a:visited or any pseudo classes. Why? that's what I'm really curious. There's probably many logical gaps which I'm missing.

Anyway thanks for taking time for looking into documentation.

Karolin Rafalski
Karolin Rafalski
11,368 Points
Karolin Rafalski
Karolin Rafalski
11,368 Points

Have you tried cutting and pasting your visited and other rules above the body selector? It is my understanding that the last rule will override previous rules. so if you typed : body { color:orange; color:green; }

Then your text would appear green because that is the last rule.

Karolin Rafalski
Karolin Rafalski
11,368 Points

below...I meant below!

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I tried them on separate environment where there was only once CSS rule so I didn't have to.

Just try how body { color:red } doesn't change a:visited but a { color: red } does change a:visited.

It's not a big deal in real situation but just curiosity.