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.

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

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

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.

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 .

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

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

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