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 Classes in CSS

Posted by Stephen Ford
Stephen Ford
2,836 Points

Placement of class selector?

I noticed that in the video and exercise that the "class" and "hover" selector were placed in only the first link.

<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>

Although it is only in the "index" line of code, it seems to apply to all the links.

Why is it affecting all the links and not just the one in which it has been placed?

Would it be cleaner to create a separate link of code for these selectors?

Thanks! Cheers

4 Answers

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

Hi Stephen

The reason that it only uses the class="selected" on the first link because we want to make it obvious which page the visitor is currently on (index.html), by selecting and highlighting the current nav link. If you have another pages like about.html and contact.html, we will put the class="selected" to their link too.

For example:

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 ideas?

Jonathan Arbely
Jonathan Arbely
6,691 Points
Jonathan Arbely
Jonathan Arbely
6,691 Points

The class "selected" was placed in the first link only, that's right. It has a unique color too. But, it is not affecting any other links wihout the class. What affects them, are the general classes with no specific css class like "nav a", which alter any link after the "nav" html-element.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Hey Stephen, did that help?

Stephen Ford
Stephen Ford
2,836 Points
Stephen Ford
Stephen Ford
2,836 Points

Thanks everyone... I thought that I noticed that "hover" was functioning over all the links. I will examine it a bit closer but yes, as it was explained is how I had imagined it should work.

Cheers!