CODEWITHSUNDEEP
htmlcss
Tarik
Tarik

Reputation: 81721

Hover Problem in CSS -- Overwriting

Okay this is the css code I put on the master page so it applies all the child page as well :

Master.css

a
{
  color:Red;
}

a:hover
{
  color:Blue;
}

and now on some pages I need to change color and hover color of the links like :

Some child pages

a
{
  color:Gray;
}

a:hover
{
  color:Maroon;
}

But the problem is it won't change the way I defined later. I used specific id and class approaches but they also don't work.

When I wanna change some specific element style, I use inline style attribute to do it but now :hover comes into play and I don't think I can declare it inline.

Upvotes: 1

Views: 1667

Answers (3)

Gus
Gus

Reputation: 7349

CSS chooses between conflicting specifications by how specific the declaration is.

You can increase the specificity by specifying classes, ids, or adding !important to the end of your css declaration. For example:

a:hover
{
  color:Maroon;
}

will be overridden by

a.link:hover
{
  color:Blue;
}

will be overridden by

#link1:hover
{
  color:Red;
}

will be overridden by

a:hover
{
  color:Green !important ;
}

Upvotes: 6

Ross
Ross

Reputation: 17967

your HTML markup is equally important.

a { color:red; }
a:hover { color:blue; }

a.foo { color:green; }
a.foo:hover { color:black; }

<a href="#">red</a>
<a href="#" class="foo">green</a>

will work, unless something else is at play.

or as the other post suggests ~

.foo a { color:red; }
#bar a:hover { color:blue; }

remember IDs take priority over classes.

Upvotes: 1

Nikita Rybak
Nikita Rybak

Reputation: 68006

I used specific id and class approaches but they also don't work.
Can you clarify? Using specific selectors is the way to go. An example.

There I define common a look for the whole page.

a {
  color:Red;
}

and custom style for specific areas where I want it to apply.

.new-look a {
  color: Gray;
}

Upvotes: 1

Related Questions