Make secondary link color in main-navigation li

[SwissCheeseHeart]

Hello again!

My top page links (which are organized into a box list) have a black background with pink text. When the mouse pointer hovers over them, the background changes to pink and the text to white. Both of these style elements are respectively organized under the “main-navigation li a” and “main-navigation li a:hover” IDs. However, I’d like add to and alter the code so that some of the links have a different text color and hover background color besides pink.

But neither creating a span nor creating a new ID and applying it to the ul or li seems to work. And I can’t seem to find anything on Google either. Does anyone have any suggestions?

[Paulie_D]

We can’t diagnose code we have not seen.

If you can make a demo in Codepen we might be better able to assist.

[SwissCheeseHeart]

This is the code.

[kwerty]

If you are sure that there will be exactly 5 items in your top navigation, then you can use nth-child selector to style each of the links and if you aren’t then you can add class to each list items to get the desired look.

Here’s the example

 

    #main-navigation li:nth-child(2) a:hover {
      background: orange;
      color: #fff;
    }

    #main-navigation li.about:hover a {
      background: #f1f1f1;
      color: #000
    }

[Paulie_D]

One think I would say is that although it’s OK to use Ids…it’d generally considered a better idea to only use them when required.

It’s much better to use a class which enables that ‘reference’ to be re-used.

As for your specific issue there are multiple options but they will all require extra CSS.

The best option for you here is to give each li a class of it’s own as @kwerty has indicated.

http://codepen.io/Paulie-D/pen/ZYebzZ

[Author]

Posts