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.

HTML How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Guy Hagan
Guy Hagan
1,985 Points

I am confused about classes

This is the css that confuses me nav a.selected, nav a:hover{ color: #32673f;
}

I do not get it we only used the class slected on one hyperlink so shouldnt it only work on that one and why is is it the only one that will not change color when hovered over?also how does it know what webpage you are on at that moment wouldnt it just assume you were on index.html the whole time becausse thats the only one in the class selected

thanks all answers appreciated

Alan McClenaghan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alan McClenaghan
Front End Web Development Techdegree Graduate 45,538 Points

"why is is it the only one that will not change color when hovered over" The CSS makes the links change to the dark green colour. As the selected link is already that colour it does not appear to change. "how does it know what webpage you are on at that moment wouldnt it just assume you were on index.html the whole time becausse thats the only one in the class selected" See my answer below about how the "selected" class is moved to the relevant page in the HTML. This is shown in later videos in the course.

Hope this helps.

2 Answers

Christopher Lebbano
Christopher Lebbano
15,338 Points

The code you posted:

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

This code selects 2 different things, the first one is all anchor elements with the class ".selected" and that are children of navigation elements. The second one are all anchor elements that are children of navigation elements while your mouse is hovering over the anchor element (the links).

I'm not too sure what specific question you're asking. If you're asking why you would do this, it's just how the designer wanted to do this. He wanted to use this color for both of those situations.

Alan McClenaghan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alan McClenaghan
Front End Web Development Techdegree Graduate 45,538 Points

Hi Guy,

The selected class is applied to the HTML page we are currently working on, in this case the index.html homepage.

Later in the course, when we create another page the selected class will be moved to the relevant link on that page.

For Example, if nav element HTML looks like this on the Homepage: <li><a href="index.html" class="selected">Home</a></li> <li><a href="about.html">About</a></li>

It will look like this on the About page: <li><a href="index.html"Home</a></li> <li><a href="about.html" class="selected"> >About</a></li>

In a browser, the About page will have the dark green selected link while the Home link will be white but will highlight dark green when hovered over.