Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Problems with :hover, :visited on certain tasks.

When practicing this I have stumbled on a problem in Workspace. For example, task says:

/* Remove the text decoration from navigation links, and change their color when hovered */

First part works and it goes like: .navigation a { text-decoration: none; }

But when I get to the second part to change color when hovered I have tried standard type:

a:hover navigation { background-color: yellow; }

It actually didn't work for me and my workspace. After 100 tries I have tried with this:

.navigation a:hover { background-color: yellow; }

And this actually works. The same thing goes for next few tasks: /* Create visited and hover styles for all links inside 'main' */ .main-content a:visited { color: red; }

.main-content a:hover { background-color: blue; }

Is this just for me, or is there some kind of bug, and most important question: Is this a bad practice for later?

Sheila Anguiano I see, I've made a really bad mistake here. Thank you so much!

1 Answer

Sheila Anguiano
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,111 Points

If you're actually writing your CSS rule like this:

a:hover navigation { background-color: yellow; }

This won't work, because that's not the correct order of the rule, what you're saying more or less with this rule is to change ALL the links to yellow when hovered....and that might not even work because you have the navigation word in there which is completely different to .navigation which is a class selector (or in other words, in references an element in your html file with the class navigation. That's why the following code works, as well as your other examples, because they follow the same patter of a specific element selector followed by the declaration

.navigation a:hover {
 background-color: yellow;
}