Change color of selected list item.

Question

Hi,

So I trying to make the list menu item change the color from others, when its selected/active. Was fine with setting default color and one for hover action, but no luck with active part.

Please help me out on this one. Thank you.

Thats menu list itself.

<ul class="departments">
    <li><a title="Convertible Jewelry" href="http://crystalpineapple.biz/product-category/starter-bracelets/convertible-jewelry/">Convertible Jewelry</a></li>
    <li><a title="Italian Charm Bracelets" href="http://crystalpineapple.biz/product-category/italian-modular-charm-bracelets/">Italian Charm Bracelets</a></li>
    <li><a title="Destination Bangles" href="http://crystalpineapple.biz/product-category/starter-bracelets/destination-bracelets/">Destination Bangles</a></li>
    <li><a title="Nautical Diamond Bangles" href="http://crystalpineapple.biz/product-category/starter-bracelets/two-tones-14k-bangles/14k-gold-diamond-bangles-jewelry/">Nautical Diamond Bangles</a></li>
    <li><a title="Pet Jewelry" href="http://crystalpineapple.biz/product-category/starter-bracelets/two-tones-14k-bangles/pet-collection/">Pet Jewelry</a></li>
    <li><a title="Nautical 14K Gold Charms" href="http://crystalpineapple.biz/product-category/starter-bracelets/14k-gold-charms/">Nautical 14K Gold Charms</a></li>
    <li><a title="Religious 14K Gold Charms" href="http://crystalpineapple.biz/product-category/italian-modular-charm-bracelets/religious/">Religious 14K Gold Charms</a></li>
    <li><a title="Destination 14K Gold Charms" href="http://crystalpineapple.biz/product-category/starter-bracelets/destination-14k-gold-charms/">Destination 14K Gold Charms</a></li>
    <li><a title="Sea Life 14K &amp; Diamonds" href="http://crystalpineapple.biz/product-category/starter-bracelets/sea-life-jewelry/">Sea Life 14K &amp; Diamonds</a></li>
    <li><a title="Wave &amp; Nautical Sterling Jewelry" href="http://crystalpineapple.biz/product-category/starter-bracelets/wave-and-nautical-jewelry/">Wave &amp; Nautical Sterling Jewelry</a></li>
    <li><a title="Humanity Bracelets" href="http://crystalpineapple.biz/product-category/starter-bracelets/humanity-bracelets/">Humanity Bracelets</a></li>
    <li><a title="Jewelry John Bells" href="http://crystalpineapple.biz/product-category/starter-bracelets/jewelry-john-bells/">Jewelry John Bells</a></li>
    <li><a title="Tear Bottles" href="http://crystalpineapple.biz/product-category/starter-bracelets/tear-bottles/">Tear Bottles</a></li>
    <li><a title="Flip Flop Pendants" href="http://crystalpineapple.biz/product-category/starter-bracelets/flip-flop-jewelry/">Flip Flop Pendants</a></li>
    <li><a title="Solar Chimes" href="http://crystalpineapple.biz/product-category/starter-bracelets/solar-chimes/">Solar Chimes</a></li>
    <li><a title="Magnabilities" href="http://crystalpineapple.biz/product-category/starter-bracelets/magnabilities/">Magnabilities</a></li>
    <li><a title="Kameleon Jewelry" href="http://crystalpineapple.biz/product-category/starter-bracelets/kameleon-jewelry/">Kameleon Jewelry</a></li>
    <li><a title="Coffee Scoops" href="http://crystalpineapple.biz/product-category/starter-bracelets/coffee-scoops/">Coffee Scoops</a></li>
    <li><a title="Glass Chocolates &amp; Sweets" href="http://crystalpineapple.biz/product-category/starter-bracelets/glass-chocolates-sweets/">Glass Chocolates &amp; Sweets</a></li>
    <li><a title="Popcorn Blouses" href="http://crystalpineapple.biz/product-category/starter-bracelets/popcorn-blouses/">Popcorn Blouses</a></li>
    <li><a title="Christmas Ornaments" href="http://crystalpineapple.biz/product-category/starter-bracelets/cape-cod-christmas-ornament/">Christmas Ornaments</a></li>
    <li><a title="Window Cling Designs" href="http://crystalpineapple.biz/product-category/starter-bracelets/window-cling-designs/">Window Cling Designs</a></li>
    <li><a title="Awareness Bracelets" href="http://crystalpineapple.biz/product-category/starter-bracelets/personalized-bracelets/awareness-bracelets/">Awareness Bracelets</a></li>
    <li class="gift-cert"><a title="Order Gift Certificates" href="http://crystalpineapple.biz/product-category/starter-bracelets/order-gift-certificates/">Order Gift Certificates</a></li>
</ul>

This is the CSS applied to it.

.departments {
 margin: 40px 4px 7px 0px;
 color: #FFFFFF;
}

ul.departments {
list-style-type: none;
}

ul.departments li {
line-height: 120%;
margin-bottom: 4px;
padding: 3px 0 3px 7px;
font-size: 13px;
background: rgba(68, 50, 102, 0.5);
border-radius: 10px;
font-weight: 900;
}

ul.departments li:hover {
background: rgba(63, 76, 107, 0.9);
}

ul.departments li.gift-cert {
background: rgba(0, 153, 102, 0.5);
}

ul.departments li.gift-cert:hover {
background: rgba(63, 76, 107, 0.9);
}

ul.departments a{
text-decoration: none;
color: #FFFFFF;

Menu can be seen here - http://crystalpineapple.biz/shop/

Answer 1 · 2014-01-20T14:17:04Z

January 20, 2014 2:17pm

Hi Serhiy,

Could you enter your code using the directions in the markdown cheat sheet so its easier to read rather than being in one big block then I'm sure we can get you problem sorted for you.

Take a look at the tips for asking questions tutorial for a guide.

Cheers

Answer 2 · 2014-01-20T14:26:38Z

January 20, 2014 2:26pm

You can do this to get what you're looking for.

ul.departments li:hover, ul.departments li:focus { ... }

if you want the same style applied.

Answer 3 · 2014-01-20T15:02:17Z

January 20, 2014 3:02pm

Hi Serhiy,

Try using the :active selector

you will have to add a active class to your html

<li class="active"><a title="Convertible Jewelry" href="http://crystalpineapple.biz/product-category/starter-bracelets/convertible-jewelry/">Convertible Jewelry</a></li> 
<li class="active"><a title="Italian Charm Bracelets" href="http://crystalpineapple.biz/product-category/italian-modular-charm-bracelets/">Italian Charm Bracelets</a></li> 
<li class="active"><a title="Destination Bangles" href="http://crystalpineapple.biz/product-category/starter-bracelets/destination-bracelets/">Destination Bangles</a></li>

Answer 4 · 2014-01-20T15:18:52Z

January 20, 2014 3:18pm

You may be able to do it by adding class = active to the ul only I'm not sure and have nothing to test it on.

I use the :active selector to change the colour of my nav li items when user changes page so the page they are on has a blue tab

Oops, Ive just gone back to look at my html and css and its not :active i use, just a .active class, sorry Serhiy

It only works for me as i have a separate page for each list item.

Answer 5 · 2014-01-20T15:27:23Z

January 20, 2014 3:27pm

Is it that you Pet Jewelry to show as the selected category when on the Pet Jewelry page? If so, then you're going to need to use javascript. Otherwise you will need to look at the body class that's applied to each category page and match it up with the departments a title attribute.

It will help if you can apply classes to each li item.

For instance you would then be able to do this.

.term-pet-collection .departments .pet-jewelry

Does that make sense?

Welcome to the Treehouse Community

Looking to learn something new?

Serhiy Hryva

Serhiy Hryva

Change color of selected list item.

Wayne Priestley

Wayne Priestley

Serhiy Hryva

Serhiy Hryva

Wayne Priestley

Wayne Priestley

5 Answers

Wayne Priestley

Wayne Priestley

Serhiy Hryva

Serhiy Hryva

Chase Lee

Chase Lee

Rick Yentzer

Rick Yentzer

Serhiy Hryva

Serhiy Hryva

Wayne Priestley

Wayne Priestley

Serhiy Hryva

Serhiy Hryva

Wayne Priestley

Wayne Priestley

Rick Yentzer

Rick Yentzer

Serhiy Hryva

Serhiy Hryva