Proper use of "! important" -
11-03-2003
, 11:33 AM
Hello,
I want to change the style of a link (<a>) when the page finishes
loading. This would be a trivial problem, except the link already has
a style defined. I think I've solved the problem, but I want to get
some feedback on my solution.
The CSS, JavaScript, and HTML is essentially this:
// JAVASCRIPT
function changeStyle()
{
document.getElementById("linkB").className="blueCl ass";
}
// CSS
div.redClass a
{ color:#FF0000; }
a.blueClass
{color:#0000BB ! important; }
// HTML
<BODY onLoad="changeStyle();">
<div class="redClass">
<a id="linkA" href="xyz.com">Link A (Red)</a><br>
<a id="linkB" href="xyz.com">Link B (Blue)</a>
</div>
</BODY>
So, you can see that both links will intially be red, but one will
quickly get changed to blue via the onLoad event that changes the
anchor tag's class. This does NOT work if I leave out "! important"
text for the blueClass attributes. Is there a better way to override
the redClass?
Thanks. |