How to make css ! important work in Google chrome...Its working in firefox and IE..

My css as follows:
 Collapse | Copy Code
dxgvControl_Office2003Blue a {
    color: black;
}
.lnkjobref {
    color: Blue !important;
    text-decoration: underline;
}

Blue color not coming in chrome alone...

I just tested with Chrome 24 and the important seems to be working as expected. Here is a demo on jsFiddle. You should notice that the link color is blue, but the underline did not apply.

http://jsfiddle.net/rgK3d/

<!DOCTYPE html>
<html>
<head>  
<style>
  .lnkjobref {color: Blue !important; text-decoration: underline;}
  #test1 {color: black;text-decoration: none;}
</style>
</head>
<body>
   <a href="#" id="test1" class="lnkjobref">Test Link</a>
</body>
</html>

!important works fine in Chrome but, this "dxgvControl_Office2003Blue a" will override this ".lnkjobref" even with !important because of the "a" targeting the href tag.

If you set your rule to just "dxgvControl_Office2003Blue" with the "a" on the end then you should see !important on the other class work just fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.