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 Build Navigation with Unordered Lists

Bartlomiej Zabielski
PLUS
Bartlomiej Zabielski
Courses Plus Student 10,363 Points
Posted by Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

In the nav tag we have created a unordered list. Why does first item "portfolio" not take on a:hover color change?

In the nav tag we have created a unordered list. Why does first item "portfolio" not take on a:hover color change?

I think it means somewhere in the code its more specific than the other ones that change when we hover over them. like "about" or "gallery". I think it has something to do with the class .selected but dont see it.

Any chance can tell me what is causing it to remain white even when we hover? please

thank you Bart

2 Answers

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Bartlomiej, You have the right idea: If the "Portfolio" menu item has class="selected" applied to it, and in the CSS there's a rule to set nav a.selected to that green color, that rule will outweigh both the nav a and the nav a:hover rules, regardless of the order those rules are listed in. This is because classes have a higher level of specificity than both elements and states. Specificity in CSS is an important and sometimes tricky topic, so the more you get a handle on it, the better a CSS master you'll be. Hope this helps you!

Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points
Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

Hey Eric thanks for reply.

I am getting closer to understanding it. I just wrote the entire path to select the anchor and it fixed it.

nav li a.selected, nav a:hover { color: #32673f; }

so instead of nav a.selected i wrote out whole thing. Maybe somewhere in the CSS i have a nav li selector that is causing problems I will clean up the CSS and find it (:

It does work now though the page I am on is solid color and other options hover green. so they go from white and then hover makes them green. It does what I want now just the CSS is bit messy like my grammar. Never expected web design to be so suspenseful. Each time I refresh the browser I stare at the screen intently hoping it worked.

Eric Butler
Eric Butler
33,512 Points

Haha! I love how true that is, "suspense." It reminds me of this funny meme. Honestly, I don't think devs ever stop having that feeling of the page-refresh and wondering, "Is it going to work?" Cheers!