Question

So... this is my problem:

I made a list of links using a php loop.

What I want to do next is to colour each and everyone of them, but with a different colour when hovered over by the mouse. (red and lime)

These colours will be stacked inside a .txt file (I already figured that part out).

I've already found a way to do so, but it was creating a new div every time the loop was done and doing such, there was that space between divs that I don't like.

a {
  color:white;
  -o-transition:color .3s ease-out;
  -ms-transition:color .3s ease-out;
  -moz-transition:color .3s ease-out;
  -webkit-transition:color .3s ease-out;
  transition:color .3s ease-out;
  text-decoration: none;

}
a:hover { color:cyan; }

This is my css code for the normal hover (in case there is neither red nor lime for that link)

I'm trying to tell the "code" which colour to apply by using php variables (already figured that part too).

My question is: Is it possible to have, let's say, "subclasses" to a class? I mean, to be able to make a "subclass" for the lime and one for the red, having all in ONE div and applying them by php variables.

SOLVED! Thank you all very much for your help and sorry that I couldn't be more exact when writing this.

Was it helpful?

Solution 2

You can use multiple classes for subclasses of a CSS class.

But in your case you could simply add only one class link-lime/link-red like <a class="link-lime"... or <a class="link-red"... along with the CSS-rules a.link-lime:hover { color:lime } a.link-red:hover { color:red }

OTHER TIPS

If it is to use 3 colors and swap to another each time , nth-child is your friend: DEMO

a:hover {
  background:cyan;
}
li:nth-child(3n) a:hover {
  background:red;
}
li:nth-child(3n-1) a:hover {
  background:lime;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top