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

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

Martin Grabowski
Martin Grabowski
302 Points
Posted by 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
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
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
Sreng Hong
Sreng Hong
15,083 Points

Yes, you correct. Good job.