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

nicolaslemaire
nicolaslemaire
12,806 Points
Posted by nicolaslemaire
nicolaslemaire
12,806 Points

Question about the "nav a.selected" CSS rule

Hi there, I'm viewing again this lesson and I have a question about it. In our code, the "right" link is "nav ul li a.selected", how come we can "skip" those 2 "ul li" to reach "a" alone?

I'd like to grab this reasoning because for the "nesting" concept, it seems that it's critical to me. Can someone walk me through this process? How come we don't have to include in this arborescence the "ul li" to get the CSS rule right? Thanks very much, take care. Nicolas

2 Answers

Seth Reece
Seth Reece
32,867 Points
Seth Reece
Seth Reece
32,867 Points

Hi Nicolas,

If you work backwards, you are styling a class named "selected" on an anchor element that belongs to a list item element in an unordered list inside a nav element. The selected class could be attached to any one of the links in the list items. This allows you to change which link has the class of selected based on which page the user is on.

Claudine Bananal
Claudine Bananal
1,756 Points
Claudine Bananal
Claudine Bananal
1,756 Points

Hi Seth,

I have a question. In Nick Pettit's lesson, the class name ".selected" applies a #32673f color to the anchor tags inside the nav (when the site visitor is at the current page).

However, I tried doing "nav ul li a.selected" as the property instead of just "nav a.selected" (as what was used in the lesson) and it still worked. My question now is:

Is "nav a.selected" just a shorthand property? Can either of the properties be used, meaning is it just a matter of preference? I figured that even with "nav ul li a.selected" as the property used, we can still change which links will have the class of ".selected" in our HTML markup, isn't it?

Thank you!

Seth Reece
Seth Reece
32,867 Points
Seth Reece
Seth Reece
32,867 Points

HI Claudine,

You could just use:

.selected {
  color: red;
}

Using:

nav a.selected {
  color: red;
}

helps anyone else that looks at your code find what you're styling a little easier. Nick doesn't really go into working on projects as a group in this course. You could specify that a li of an ul in nav is being styled, but there is only one nav element in this case so it should be easy enough for someone else to find.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

OK, thanks a lot Seth, I think I got it now, nice explanation :)