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

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
218,695 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.

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
218,695 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.