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 Kalidh Mohamed
Kalidh Mohamed
5,995 Points

Class="selected" for different pages?

So Nick says that to let the user know that they are a specific page, you have to use a class. But, what if you want the user to know which they are on for different pages?

This method only seems to work for the "portfolio" page. What if I want it to be "selectively" showing the user that they are on contacts page? Or About page?

1 Answer

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Hi Kalidh,

In order for your user to find out what page his on, you would have to add the class="select" on all the pages. You would have to move it to that specific link on the page. For example:

The Home Page:

      <nav>
        <ul>
            <li><a href="index.html" class="selected">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>

About Page:

      <nav>
        <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html" class="selected">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>

Contact Page:

      <nav>
        <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>

Let me know if this answers your question.

Best, Victor