CODEWITHSUNDEEP
cssinheritance
Justin Meltzer
Justin Meltzer

Reputation: 13558

Overriding parent CSS attribute

I have this CSS:

a:hover {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

for all links in my app. However, on one specific link I want to nullify all of this hover behavior. How can I do this?

Note that it's not as simple as redefining these attributes for the specific link, because the color of the specific link changes, and so I couldn't just choose one background-color...

Upvotes: 1

Views: 1028

Answers (3)

Richard Poole
Richard Poole

Reputation: 3984

Most (all?) CSS properties allow you to inherit from the parent element:

a:hover.special {
    background: transparent;
    color: inherit;
    text-decoration: inherit;
}

Upvotes: 1

Bryan Downing
Bryan Downing

Reputation: 15472

I previously posted a comment saying you couldn't do this, but there's a :not() selector in CSS 3 that could do this. It just won't work in IE < 9. I think you'd have to use JS to do it in IE.

a:hover:not(#specific_link) {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

Upvotes: 1

Paul Sham
Paul Sham

Reputation: 3205

I'm not completely sure what you mean by overwrite, but you can try setting the background color to transparent, so you're not specifying a specific colour.

a:hover.moreSpecific{
   background-color: transparent;
}

Upvotes: 1

Related Questions