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 Customizing Colors and Fonts Use Classes in CSS

Posted by Miguel Willbanks
Miguel Willbanks
1,491 Points

How is the "class" linked to the action of viewing a specific <a><li> element?

Usually, an element is called upon because it was addressed through code. I don't see that happening with the "class" attribute. How does the code understand that when someone is viewing a specific page it needs to highlight the corresponding <nav> element.

1 Answer

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

I don't see "class" being used in this video. But I do see where the CSS targets "nav" directly by tag name to set the color.

If I missed something, please provide the time index for the part you are looking at that involves class.

Miguel Willbanks
Miguel Willbanks
1,491 Points

The section is called "Using Classes in CSS" and it's around 1:39 where he starts implementing the attribute. He then proceeds to call on the 'class' name he assigned the <li> element to signify which page the viewer is currently on. It does this by making the corresponding <nav> link change to the color he assigned.

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

I see now, it's not the nav being changed there but the anchor (a) element. The CSS is created in the video right after the class is added to the HTML, and the selector is:

nav a.selected {

This means "apply this rule to a elements that are inside a nav element, and only if they have have the class of selected. Since that class is applied to the element that refers to the current page, only that one will be highlighted.