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 Chelsea Egan
Chelsea Egan
4,282 Points

Selecting a class within a tag in CSS

In my project, I'm trying to select a list item that has the class "selected" within an unordered list with the class "tabrow." I used the following:

.tabrow li.selected { background: #FFF; color: #000; }

When I do this, no changes occur. The "selected" tab does not change. I've looked online and can't figure out what I've done wrong. Is it a bug? Or did I do something wrong?

Here's my code

Thanks in advance!

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hi Chelsea,

I think you are just going too deep into specificity. If you just use .selected as the only class selector, you will find that it works. You don't need the .tabrow or li selectors.

Keep Coding! :)

Chelsea Egan
Chelsea Egan
4,282 Points

Thanks for the response!

I did try that, but if I just use .selected, then only the background around the word turns white. The whole box does not turn white. If I use li the whole box turns white, but I don't want to select all of the list items. How can I fix this?

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Ah, okay.

The word only changes color, because your class is attached to your anchor element. If you want the whole box to change, then you need to move the class attribute from the <a> tag to the <li> tag of the same line in your HTML doc.

So instead of

<li><a href="index.html" class="selected">Blog</a></li>

put

<li class="selected"><a href="index.html">Blog</a></li>

Then in your CSS, you would use li.selected. This will color the whole box for you. :)

Chelsea Egan
Chelsea Egan
4,282 Points

That worked! Thank you so much. I spent forever trying to figure out what I was doing wrong and it's so simple :)