'Is it possible to use multiple link styles in css?

Is it possible like lets say the text in the div header has a red hover, and the text in the div in the footer a white hover? Or is this just not possible and can you only set 1 style for the whole document?

htmlcss


Solution 1:[1]

This is very much possible, just like any other element you can style them separately by being more specific.

If you have this HTML:

<div id="top">
    <a href="#">First link</a>
</div>

<div id="bot">
    <a href="#">Second link</a>
</div>

With this CSS you would style both links:

a:hover {
    color: #000;
}

With this CSS you can style them separately:

#top a:hover {
    color: #f00;
}

#bot a:hover {
    color: #fff;
}

Solution 2:[2]

You can set as pretty much as many as you want to if you just hook it right:

/* every a:hover has color red */
    a:hover { color: red; } 
/* #footer a:hover has color green. */   
    #footer a:hover { color: green; } 
/* Every link that has class ".ThisClass" will have yellow color */
    a.ThisClass:hover { color: yellow; }

Solution 3:[3]

Yes this is possible.

#header a:hover {
    color: #f00;
}

#footer a:hover {
    color: #0f0;
}

http://jsfiddle.net/wrygB/2/

You may want to split this though so you can use the same hovers elsewhere. In which case you would do:

.main:hover {
    color: #f00;
}

.sub:hover {
    color: #0f0;
}

And then you can apply a class of main or sub to any element to get the hover effect.

Solution 4:[4]

Well you'd just select the element the a:link is within, and apply styles like that.

i.e 

#header a:hover { color: red; }
#footer a:hover { color: white; }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kokos
Solution 2 Joonas
Solution 3
Solution 4 MassiveAttack

Related Questions