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

Posted by Richard Rodis
Richard Rodis
1,112 Points

Difference between class and nav ul li a

If I have this

 <nav>
        <ul>
         <li> <a href= "FAMILY.HTML" class="selected">Family</a> </li>

          <li> <a href= "PETS.HTML" class="selected"> Pets</a> </li>

          <li> <a href= "FOOD.HTML" class="selected"> Food</a> </li>

        </ul>

     </nav>

And I want to style it using css, what is the difference between something like?

nav {

}

nav u; {

}

nav ul li {

}

nav ul li a {

}

and

.selected {

}

1 Answer

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points

Each of those different css selectors will target different elements on the page, allowing you to specify styles to target those elements. In each case it is only the targets that have the css rules applied, not the surrounding element(s).

nav {

}

This will target any nav elements on the page.

nav ul {

}

This will target any ul elements that are nested within a nav element.

nav ul li {

}

This will target li elements nested within an ul element, which is in turn nested within a nav element

nav ul li a {

}

I'm sure you get the idea by now :)

.selected {

}

This targets any elements on the page that have the the class of selected, regardless of what element it is.

Hope that's enough.