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
Guy Hagan
1,985 PointsI 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
2 Answers
Christopher Lebbano
15,338 PointsThe 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
Full Stack JavaScript Techdegree Graduate 56,500 PointsHi 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.
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,500 PointsAlan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,500 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.