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

Natalie Bould
Natalie Bould
777 Points
Posted by Natalie Bould
Natalie Bould
777 Points

HTML class selectors

Hi, I'm just learning about HTML class selectors but I don't understand how the class "selected" translates to showing site visitors which page they are currently on, as stated. Nick (the tutor) says he just made the term up, so it's not specific - how, then, does it give the specific information that says which page the visitor is on?

5 Answers

Christopher Lebbano
Christopher Lebbano
15,338 Points
Christopher Lebbano
Christopher Lebbano
15,338 Points

So it's just the made up term for a class. When the user is on a specific page, like index.html, he just includes the class "selected" into the <a> element.

So while the user is on the index.html page, it'll look like <a href="index.html" class="selected">Home</a>

And then, in the CSS, you will select the class "selected" and alter the way the text "Home" above looks. That way, the user will know he is on the "Home" page, because the text is different than the rest.

You can then just use that "selected" class on another page to let the user know he or she is there.

Natalie Bould
Natalie Bould
777 Points
Natalie Bould
Natalie Bould
777 Points

Ok... so am I right in concluding that the "selected" class actually needs to be applied to all the <a> elements? In which case, whichever <a> element is selected will have the color change applied?

Tyler Vanderley
Tyler Vanderley
20,491 Points
Tyler Vanderley
Tyler Vanderley
20,491 Points

Hi Natalie,

So, it's not exactly the selector that is showing the site the visitor is on. That is done by the <a> tag that is used. So, for example,

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

We see that we have 3 <a> tags that link to index.html, about.html, and contact.html. When we click the element on the page that says index, we arrive at the link provided here:

a href="index.html"

We just coded additional information to show it as selected by giving it the selected class. This selected class will look into our css for how it should be styled. It's only giving the "illusion" of really understanding that the page is selected.

What I mean by this is, let's say that we had the following code:

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

But let's say this was the code for the index.html page. Despite the fact that the actual selected page is index.html, because we gave the class "selected" to about.html, we're creating the "illusion" that we're actually on the about.html page.

In short, the css class "selected" is only applying style to the element that has that class.

I hope this helps!

Moderator Edit: Moved reply from the Comment section to the Answer.

Natalie Bould
Natalie Bould
777 Points
Natalie Bould
Natalie Bould
777 Points

Ok... so am I right in concluding that the "selected" class actually needs to be applied to all the <a> elements? In which case, whichever <a> element is selected will have the color change applied?

Christopher Lebbano
Christopher Lebbano
15,338 Points
Christopher Lebbano
Christopher Lebbano
15,338 Points

Well it doesn't need to be added to ALL of the <a> elements, only the one that is the current page.

example. inside of the index.html file, the anchor that has the href="inxdex.html" should also have class="selected" and no other <a>'s should.

In the about.html file, the anchor with the href="about.html" should have class="selected" and no other <a>'s should.

In the contact.html file, the anchor with the href="contact.html" should have class="selected", and no other <a>'s should.

Tyler Vanderley
Tyler Vanderley
20,491 Points

Not quite. What you said might make more sense with another example.

Let's say you have the following in your main.css file:

.selected {
color: red;
}

Then you did what you said:

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

This would result in ALL of the elements showing as selected at once, which, in this case means they all pages appear with red text.

What you would want instead is to do the following:

On your index.html page, you'd want the following code to show "Portfolio" as selected:

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

On your about.html page, you'd want the following code to show "About" as selected:

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

On your contact.html page, you'd want the following code to show "Contact" as selected:

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

The CSS isn't smart enough to know which is selected. That would require the use of JavaScript.

Natalie Bould
Natalie Bould
777 Points
Natalie Bould
Natalie Bould
777 Points

Eureka! The very obvious thing I've been missing is that the code is being written into the "index.html" page (doh.). So when I do the html for the other pages, that's when I should add the "selector" class. Thanks both of you for your help!