Jamie Belcher Jamie Belcher - 5 months ago 8
CSS Question

Changing certain on:hover colours depending on attribute

I have a special on-hover attribute that basically underlines whatever I hover over in a pretty looking way.

Right now the colour of the underline has been set to white, I was wondering if there would be a way to change that colour for different items?

My Navigation Bar

I have no idea what to do, I've tried changing it inline but due to it being:

.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}


I'm not sure it'll work inline due to this

EDIT ---

I should've mentioned that if you click the "contracts " tab, a new list appears and that I'm trying to change the colours of each of their underlines somehow, silly me!

Answer

Use the nth-child(n) selector, like this:

// Override the first element in the menu to be red
.navbar li:nth-child(1):before {
    background-color:red;
}
Comments