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 Alaa Kassab
Alaa Kassab
420 Points

i am confused , how did he get the selected page to be in a different color , class ,will not do it !?

i am confused , how did he get the selected page to be in a different color ,he used a class, class , is using a class inside the al elelment will make it will change the color of the nav when it is selected

3 Answers

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

There are several ways to select an element in CSS. You can use a tag selector, a class selector or an id selector, among others.

Say your html looks like this:

<body>
  <ul id="a">
    <li class="x"></li>
    <li ></li>
  </ul>
  <ul id="b">
    <li class="x"></li>
    <li ></li>
  </ul>
</body>

In your css, if you want to select the body or both unordered lists you would use a tag selector:

body {
 . . .
}

ul {
  . . . 
}

If you want to select just the first unordered list you could use the id selector:

#a {
  . . .
}

This selects the first unordered list, but not the second one.

If you want to select the two list items whose class attribute is x you would use a class selector:

.x {
  . . .
}

Etc. As always, there are other ways, and many other combinations. but that's the basics.

Alaa Kassab
Alaa Kassab
420 Points

yeah , but how did he make the selected link to be green , he used a class , and a class have no meaning , when he changed the color of hover , he used a:hover, but for selected he used only the class .

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

He added a class attribute to the link: 

<a href="index.hml" class="selected">

Then he used that class attribute to select just that one link in the css:

nav a.selected {
  color: #32673f;
}

Adding the class attribute (class="selected") enables him to select the link using a class selector (a.selected). That is what the video lesson is about: how to create and use class selectors.

a:hover is what is called a pseudo-class. It allows you to write a rule that applies only when a user is hovering over the link. Don't confuse pseudo-classes with classes.

Tracey McEntyre
Tracey McEntyre
1,757 Points
Tracey McEntyre
Tracey McEntyre
1,757 Points

I had the same issue, but I noticed I had a space between nav a & .selected. once I closed the close Portfolio did highlight.

nav a.selected, nav a:hover { color: #fff; }

Gavin McNeill
Gavin McNeill
Courses Plus Student 4,556 Points
Gavin McNeill
Gavin McNeill
Courses Plus Student 4,556 Points

This was a very helpful comment :P didn't even think to look at spacing!