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.

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

Martin Grabowski
Martin Grabowski
302 Points

Why add the psuedo class "selected" if in my case it's not needed?

Why would I add the "selected" psudo class to my nav a element in order to have the links remain white after they have been selected, when they already do that without this psudo class. All I have is nav a { color : #fff; } and it already make the links white no matter if they are selected or not. What am I missing here?

2 Answers

Sreng Hong
Sreng Hong
15,083 Points

Hi Martin

First of all, "selected" is not a pseudo class. It's just a normal class name.

Second, the reason they added this class to the link because they want to make the different selected (css style) when they're in different pages.

For example, you have 3 page html: index, about, contact.

index.html

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

about.html

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

contact.html

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

Do you get the reason now?

Martin Grabowski
Martin Grabowski
302 Points

Hi Sreng, Thanks for the info but I'm still a bit lost. My links are obviously broken, but would I add class ="selected" to all three Href's? That way each time they click on one of the links they are brought to that page, and since the css says that when that link is selected, it should be turned white, the nav link will only be white if you are on the page that is associated with it? Is this correct? Am I close?

Thanks,

Sreng Hong
Sreng Hong
15,083 Points

Yes, you correct. Good job.